c3js数据标签的位置
有没有办法在c3
条形图中更改数据上方的标签位置? 在官方文档中,很好地解释了如何通过操纵y和x整数来改变x和y测量轴上标签的位置,但我没有找到任何数据标签。
我试图用简单的d3
指向它,其中c3
是基于但是console.log
返回null:
d3.selectAll(".c3-texts .c3-text").each(function () { var yOrigin = d3.select(this).attr('y'); console.log(yOrigin); })
因为它在图形生成之前触发。 您可以在这里查看和编辑我正在处理的内容: http : //jsfiddle.net/e60o24d0/
有两种方法可以影响这些标签:
一个。 在CSS中使用transform
:
.c3-texts .c3-text text { transform: translate(-22px, 0); }
湾 在onrendered
回调中使用D3选择它们:
var chart = c3.generate({ onrendered: () => { d3.selectAll('.c3-text').each((v) => { console.dir(v); }); }, data: { columns: [ ['data1', 30, -200, -100, 400, 150, 250], ['data2', -50, 150, -150, 150, -50, -150], ['data3', -100, 100, -40, 100, -150, -50] ], groups: [ ['data1', 'data2'] ], type: 'bar', labels: true }, grid: { y: { lines: [{value: 0}] } } });
这比使用setTimeout要好,因为您无需猜测在使用D3选择标签之前渲染标签需要多长时间。