c3js，X轴挤压成形不良
c3js，X轴挤压成形不良
提问于 2016-06-13 15:05:53
目前，我正在使用下面的示例：culling.html
但问题是，当您添加3-4倍的数据装载时，X值就会被压碎，格式也很糟糕。我怎么才能解决这个问题？
见此处：http://i.imgur.com/F7BWMDk.png
谢谢。
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-06-16 18:27:56
宽度对我来说很好，看看三位数X轴
var chart = c3.generate({
data: {
columns: [
['sq', 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 200, 100, 400, 150, 250,30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 200, 100, 400, 150, 250,30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 200, 100, 400, 150, 250,30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 200, 100, 400, 150, 250,30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 200, 100, 400, 150, 250,30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 200, 100, 400, 150, 250,30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 200, 100, 400, 150, 250]]
},
axis: {
x: {
type: 'category',
tick: {
width: 22,
culling: {
max: 7
}
}
}
}})；
Stack Overflow用户
发布于 2016-06-13 17:33:02
在这里，您需要添加tick.width参数。它还没有被记录下来(我们正在研究)
var chart = c3.generate({
data: {
columns: [
['sq', 30, 200, 100, 400, 150, 11,11,11,11,111,11,11,11,22,22,22,22,22,223,43,32,14,250, 30,31, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 200, 100, 400, 150, 250]]
},
axis: {
x: {
type: 'category',
tick: {
culling: true,
width: 11
}
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="chart">
</div>
var chart = c3.generate({
data: {
columns: [
['sq', 30, 200, 100, 400, 150, 11,11,11,11,111,11,11,11,22,22,22,22,22,223,43,32,14,250, 30,31, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 200, 100, 400, 150, 250]]
},
axis: {
x: {
type: 'category',
tick: {
culling: true,
width: 11
}
}
}})；
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37793194
复制相关文章
相似问题
腾讯云开发者
