我正在使用新的c3js库.有没有办法为图表中的一段数据更改标签？我有一个条形图,每个条形图都是一个美元值.我希望每个柱的标签为100美元而不是100.如果我将值设置为100美元,则库无法生成图表.有没有办法改变标签 - 如果不是基础价值？
您可以指定数据标签和轴刻度线的格式.看看下面的例子.
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./css/c3.css">
<script src="./js/d3.min.js"></script>
<script src="./js/c3.min.js"></script>
</head>
<body>
<div class='chart'>
<div id='chart'></div>
</div>
<script>
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 140, 200, 150, 50]
],
type: 'bar',
labels: {
format: {
y: d3.format("$,")
//y: function (v, id) { return "Custom Format: " + id; }
}
}
},
axis : {
y : {
tick: {
format: d3.format("$,")
//format: function (d) { return "Custom Format: " + d; }
}
}
}
});
</script>
</body>
</html>
查看d3.js中的格式化选项,或者您可以编写自己的函数(请参阅上面注释掉的代码).
您还可以将值显示为字符串:http://c3js.org/samples/data_stringx.html
var chart = c3.generate({
data: {
x : 'x',
columns: [
['x', '$100', '$200', '$300', '$400'],
['download', 30, 200, 100, 400],
['loading', 90, 100, 140, 200],
],
groups: [
['download', 'loading']
],
type: 'bar'
},
axis: {
x: {
type: 'categorized' // this is needed to load string x value
}
}
});