以更令人愉悦的方式呈现轴的值 [英] present in a more pleasant way the values of the axis
本文介绍了以更令人愉悦的方式呈现轴的值的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在我当前的图表中,x轴值难以辨认.我该如何改善显示效果,或者至少要确保x值的间隔具有均匀的间隔.
In my current chart the x-axis values are illegible. how can I improve the presentation or at least that the intervals of the x values have a uniform separation.
var chart = c3.generate({
data: {
xs: {
data1: "data2",
data3: "data4"
},
xSort: false,
columns: [
['data1', -4,3,4,7,8,9,8,7,3],
['data2', -5,2,3,4,5,4,3,2,1],
['data3', Math.random() * 10,Math.random() * 10,Math.random() * 10,Math.random() * 10,Math.random() * 10,Math.random() * 10],
['data4', Math.random() * 10,Math.random() * 10,Math.random() * 10,Math.random() * 10,Math.random() * 10,Math.random() * 10]
]
}
});
https://jsfiddle.net/9zmbq0g0/
推荐答案
使用 axis.x.tick.values :
var chart = c3.generate({
data: {
xs: {
data1: "data2",
data3: "data4"
},
xSort: false,
columns: [
['data1', 2,3,4,7,8,9,8,7,3],
['data2', 1,2,3,4,5,4,3,2,1],
['data3', Math.random() * 10,Math.random() * 10,Math.random() * 10,Math.random() * 10,Math.random() * 10,Math.random() * 10],
['data4', Math.random() * 10,Math.random() * 10,Math.random() * 10,Math.random() * 10,Math.random() * 10,Math.random() * 10]
]
},
axis: {
x: {
tick: {
values: d3.range(-5,10)
}
}
}
});
#catImage {
width: 40px;
height: 40px;
position: absolute;
left: 40px;
top: 0px;
}
<link data-require="c3.js@0.4.11" data-semver="0.4.11" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.css" />
<script data-require="c3.js@0.4.11" data-semver="0.4.11" src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.js"></script>
<script data-require="d3@3.5.17" data-semver="3.5.17" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
<div id="chart"></div>
这篇关于以更令人愉悦的方式呈现轴的值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文