c3js›值0在Y和Y2之间对齐 [英] c3js › value 0 aligned between Y and Y2
问题描述
如何将Y 0轴值与Y2 0轴值对齐?
How to align the Y 0 axis value to Y2 0 axis value?
请参阅 jsFiddle 了解
我在轴上尝试了选项center:0
,但我不希望图形中心为0.
I tried the option center:0
on the axe's but i don't want 0 on center of graph..
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'}
]
}
}
});
官方文档.
谢谢.
推荐答案
通常,您希望轴范围的相同比例大于零或小于零,这就是为什么min:-20适用于此特定示例的原因
In general you want the same proportion of the axes ranges above and below zero, which is why min: -20 would work for this particular example
这通常在您生成图表后会起作用:
This would work in general after you've generated your chart:
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]}
});
}
基本上,如果一个(或两个)系列均具有负值,则使用最小/最大轴设置将两个系列的比例缩放为正负范围的比例相同.这意味着两个零都位于相同的垂直点上
Basically if either (or both) series has a negative value then it scales both series to have the same proportion of positive to negative range using the min/max axis settings. This means zero sits at the same vertical point for both
https://jsfiddle.net/ynz6quum/4/
这篇关于c3js›值0在Y和Y2之间对齐的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!