[英]Highcharts: Dual axis line and column with multiple series
I was wondering if it is possible to build a chart in highcharts such as a dual-axis column and line but with multiple series data. 我想知道是否可以在高图表中构建图表,例如双轴列和折线,但是具有多个系列数据。
For instance, take the basic column chart that shows the monthly average rainfall for Tokyo, New York, London and Berlin: http://www.highcharts.com/demo/column-basic . 例如,采用显示东京,纽约,伦敦和柏林的月平均降雨量的基本柱形图: http : //www.highcharts.com/demo/column-basic 。 Then also add the average temperature on the opposite Y-Axis for the four cities (basically adding four lines to the chart).
然后,在四个城市的相反Y轴上添加平均温度(基本上在图表中添加四条线)。
I know that's a lot of data to cram into one chart, but I was curious if it could be done. 我知道要塞入一张图表的数据很多,但我很好奇是否可以完成。 Sorry that I don't have a better example to show.
抱歉,我没有更好的例子。 I haven't had much luck so far playing around with JSFiddle.
到目前为止,我没有和JSFiddle一起玩运气。 Thanks for the help.
谢谢您的帮助。
Yes, you can do this. 是的,您可以这样做。 You create your
yAxis
items: 您创建
yAxis
项目:
yAxis: [{
min: 0,
title: {
text: 'Rainfall (mm)'
}
}, {
min: 0,
opposite: true, //optional, you can have it on the same side.
title: {
text: 'Temp (K)'
}
}],
Then you need to tell the series which yAxis
to use: 然后,您需要告诉该系列使用哪个
yAxis
:
series: [{
name: 'Tokyo',
yAxis: 1, //use new yAxis on right side.
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
name: 'New York',
yAxis: 0, //if using primary (0) yAxis can leave this out.
data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
}, {
name: 'London',
data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
}, {
name: 'Berlin',
data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
}]
In my case, even it was everything set as described, it seemed not to work well. 就我而言,即使已按照说明进行了所有设置,它似乎也不起作用。 So, just for troubleshooting reasons, I created a yAxis for each one of the series, and it displayed correctly, but with extra undesired axis.
因此,仅出于故障排除的原因,我为该系列中的每个系列创建了一个yAxis,它可以正确显示,但具有多余的不需要的轴。 Since I've struggled a lot in this problem, I'm posting here hoping to help others with the same problem I had.
由于我在这个问题上苦苦挣扎,因此我在此发布以希望帮助其他遇到同样问题的人。
Fortunatelly, I've spotted that the chart lines were being stacked. 我注意到,图表线正在堆积。 So, just by removing/commenting that property everything works as expected:
因此,只需删除/注释该属性,一切便会按预期工作:
plotOptions: {
//series: {
// stacking: 'normal'
//}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.