0
如果多行重叠，近线点的标号也重叠
C3线图，其未如预期，见Plunker，在第二点，我们只看到一个+7.3。c3.js折线图数据标签文本重叠
我的解决方法是更改data1和data2的标签文本x和y属性的值。它可以工作，但不优雅，任何人都有其他想法，非常感谢。
labels: {
format: function(v, id, i, j) {
if (i && j != undefined) {
return d3.format('+')(arrayOfDataIncrease[j][i]);
}
return '';
}
}
// Code goes here
(function(){
var arrayOfDataIncrease = [
[0, 7.3, 6.0, 43.2, 29.0],
[0, 7.3, 3.8, 36.5, 24.3]
];
var chart = c3.generate({
size: {
width: 400
},
padding: {
top: 40
},
data: {
columns: [
['data1', 0, 7.3, 13.3, 56.5, 85.5],
\t \t \t ['data2', 0, 7.3, 11.1, 47.6, 71.9]
],
colors: {
'data1': '#fd8e43',
'data2': '#64dd16'
},
labels: {
format: function(v, id, i, j) {
if (i && j != undefined) {
return d3.format('+')(arrayOfDataIncrease[j][i]);
}
return '';
}
}
},
// https://github.com/c3js/c3/issues/1033
legend: {
show: true,
position: 'inset',
padding: 5, // amount of padding to put between each legend element
inset: {
anchor: 'top-left',
x: 20,
y: -40,
step: 1
},
item: { // define custom height and width for the legend item tile
tile: {
width: 15,
height: 15
}
}
},
grid: {
y: {
show: true
}
},
axis: {
x: {
type: 'category',
categories: ['', '2014', '2015', '2016', '2017'],
padding: {left: -0.5, right: 0}
},
y: {
tick: {
format: d3.format(',.1f')
},
padding: {top: 50, bottom: 0}
}
},
tooltip: {
show: false
},
onrendered: function() {
// hide y scale line
\t d3.selectAll("." + c3.chart.internal.fn.CLASS.axis +
\t "." + c3.chart.internal.fn.CLASS.axisY +
\t " .tick line")
\t .style("stroke", "none");
\t
\t // hide x scale line
\t \t d3.selectAll("." + c3.chart.internal.fn.CLASS.axis +
\t "." + c3.chart.internal.fn.CLASS.axisX +
\t " .tick line")
\t .style("stroke", "none");
}
});
})();<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/c3.css">
<link rel="stylesheet" href="style.css">
<script src="https://unpkg.com/[email protected]/d3.js"></script>
<script src="https://unpkg.com/[email protected]/c3.js"></script>
</head>
<body>
<div class="container"></div>
<div id="chart"></div>
<script src="script.js"></script>
</body>
</html>