c3 条形图图表 - 客户想要条形上方的数字

Question

我使用 c3 图表创建了一个条形图。

我的客户不喜欢它的行为方式。他不想在 onmouseover 上获得 table。

他希望数字显示在条形图的顶部或底部（请参阅随附的屏幕截图）。

可能吗？

或者有没有可能像Microsoft(5)

这样的图例

function draw_tech_chart(){ 
    var chart = c3.generate({
        bindto: "#tech_chart",
        data: {
            columns: [['Microsoft', 5],['WebApplicationDevelopment', 2],['OpenSource', 2],['Content Management ', 2],['Open Source Middleware', 1],],
            type : 'bar',
            onclick: function (d, i) { console.log("onclick", d, i); },
            onmouseover: function (d, i) { console.log("onmouseover", d, i); },
            onmouseout: function (d, i) { console.log("onmouseout", d, i); }
        },size: {
          height: 250
        }               
    });

Answer 1

使用标签选项（将其设置为 true）。参见 http://c3js.org/samples/data_label.html

所以应该做这样的事情

function draw_tech_chart(){ 
    var chart = c3.generate({
        bindto: "#tech_chart",
        data: {
            columns: [['Microsoft', 5],['WebApplicationDevelopment', 2],['OpenSource', 2],['Content Management ', 2],['Open Source Middleware', 1],],
            type : 'bar',
            labels: true
            ...

c3 条形图图表 - 客户想要条形上方的数字

c3 bar chart chart - client want numbers above the bars

jquery

charts

d3.js

c3