c3js >值0在Y和Y2之间对齐
c3js >值0在Y和Y2之间对齐
提问于 2016-08-09 21:02:52
如何将Y 0轴值与Y2 0轴值对齐？
请参阅jsFiddle了解。
我尝试了轴上的选项center:0，但我不想在图形中心使用0。
var chart = c3.generate({
data: {
columns: [
['data1', 2000, 350, 300, -200, -50, 0],
['data2', 130, 100, 140, 200, 150, 50]
],
types: {
data1: 'line',
data2: 'bar'
},
axes:{
data1:'y',
data2:'y2'
}
},
axis: {
y: {
padding: {bottom: 0}
},
y2: {
show:true,
padding: {bottom: 0}
},
x: {
min: 0,
show: true
}
},
grid: {
x: {
show: false
},
y: {
show: false,
lines: [
{value: 0.0, text: 'i want 0 here ->', class:'red'}
]
}
}
});Official documentation。
谢谢。
Stack Overflow用户
回答已采纳
发布于 2016-08-10 21:01:15
通常，您希望轴范围大于和小于零的比例相同，这就是为什么min：-20适用于此特定示例的原因
在生成图表后，这通常会起作用：
var d1 = d3.extent(chart.data.values("data1"));
var d2 = d3.extent(chart.data.values("data2"));
if (d2[0] < 0 || d1[0] < 0) {
var prop1 = d1[0] < 0 ? -(d1[1] / d1[0]) : Math.Infinity;
var prop2 = d2[0] < 0 ? -(d2[1] / d2[0]) : Math.Infinity;
if (prop1 > prop2) {
d1[0] = -(d1[1] / prop2);
} else {
d2[0] = -(d2[1] / prop1);
}
chart.axis.range({
min: {y: d1[0], y2: d2[0]},
max: {y: d1[1], y2: d2[1]}
});
}基本上，如果其中一个(或两个)序列具有负值，则它使用最小/最大轴设置缩放两个序列，使其具有相同比例的正负范围。这意味着零点位于两者的同一垂直点。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38851558
复制相关文章
相似问题
腾讯云开发者
