c3图表数据标签重叠问题
问题描述:
我正在使用C3.js创建带有数据标签的折线图。c3图表数据标签重叠问题
问题在于,当来自2行的数据非常接近时,某些标签会重叠。
有没有办法在C3
var chart = c3.generate({
data: {
labels:true,
columns: [
['data1', 30, 20, 50, 40, 60, 230],
['data2', 40, 130, 90, 240, 130, 220],
['data3', 20, 200, 160, 400, 250, 250]
]
}
});
答
解决这个数据重叠的问题,有没有内置的方式这样做。
但是你可以尝试在标签格式功能识别和转移问题标签:
labels: {
format: function(v, id, point, line) {
if (point === undefined || line === undefined) return;
var label = d3
.selectAll('.c3-chart-text')
.selectAll('.c3-text')[line][point];
if (...) { // set your condition
var shift = ...; // set your calculation
d3.select(label)
.style('transform', 'translateY(' + shift + 'px)');
}
return v;
}
一些灵感可以在your updated fiddle找到。
@CrazyProgrammer不要忘记将c3js更新到最新版本 –