每个酒吧旁边的c3js传奇

Question

我正在处理带有c3js的堆积条形图。如何在每个条形图旁边永久显示图例的条形值？通常它们只在工具提示中。

我附上了一个模型，告诉你我的意思：

到目前为止（see my jsfiddle for a working example）：

＆＃13;

＆＃13;

var chart = c3.generate({
    bindto: '#chart',
    data: {
        columns: [
            ['data1', 30],
            ['data2', 130],
            ['data3', 230],
            
            ['data4', 120],
            ['data5', 50],
            ['data6', 20],
            
            ['data7', 30],
            ['data8', 130],
            ['data9', 230]
        ],
        type: 'bar',
        groups: [
            ['data1', 'data2', 'data3'],
            ['data4', 'data5', 'data6'],
            ['data7', 'data8', 'data9']
        ]
    },
    grid: {
        y: {
            lines: [{value:0}]
        }
    }
});

＆＃13;

＆＃13;

＆＃13;

我很满意每个输入/解决方案让我的问题得到解决：）

干杯， 马可

Answer 1

嗨，这可能，但它不是纯粹的c3。

我这样做的方法是使用d3.selectAll（“c3-bar”）来选择所有指示条形的“路径”元素。

然后我会添加d3代码，在每个栏的旁边插入一个文本元素 像

这样的东西

    d3.selectAll(".c3-bars").insert("text").text(function(d){
console.info(d);
return "123";
}).attr("x","0").attr("y","50").attr("font-size","13").attr("stroke","red");

请注意，这不是完全符合您需要的代码，但它应该让您知道应该去哪里

请注意，您必须将此代码添加到图表定义中的.onrender（）函数中，以便每次都渲染它。

fiddle