Javascript 如何将辅助 y 轴添加到 highcharts
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11350368/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add secondary y-axis to highcharts
提问by Anil
I've recently started using highcharts javascript library and came across a situation where i'm supposed to add a secondary y-axis to the existing line chart. Here is an example from the highcharts website that is similar to the chart i'm working on ==> Line chart
我最近开始使用 highcharts javascript 库，遇到了一种情况，我应该向现有折线图添加辅助 y 轴。这是 highcharts 网站上的一个示例，类似于我正在处理的图表 ==> 折线图
What i'm trying to do is to add a 2nd y-axis to the right with color blue and with tick values 0, 1, 2 and 3 on alternate lines. This seems easy and tried in the following way but could not succeed
我想要做的是在右侧添加第二个 y 轴，蓝色和刻度值 0、1、2 和 3 在交替线上。这似乎很容易，并通过以下方式尝试但无法成功
yAxis: [{
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: 'red'
}]
}, {
title: {
text: 'Temperature (F)'
},
plotLines: [{
value: 0,
width: 1,
color: 'blue'
}]
}],
Pls guide me. Thanks in advance
请指导我。提前致谢
回答by wergeld
See this documentationand this demo. Note you do not have to make the axis opposite the chart from each other. You can use offset for same-side axis.
请参阅此文档和此演示。请注意，您不必使与图表相对的轴彼此相对。您可以对同侧轴使用偏移量。
The trick is you need a list of multiple axes settings, and the series needs to identify which zero-based axis it uses:
诀窍是您需要一个多轴设置列表，并且该系列需要确定它使用哪个从零开始的轴：
Highcharts.chart('container', {
chart: {
marginRight: 80 // like left
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: [{
lineWidth: 1,
title: {
text: 'Primary Axis'
}
}, {
lineWidth: 1,
opposite: true,
title: {
text: 'Secondary Axis'
}
}],
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2],
yAxis: 1
}]
});
(edits: Doc needs link to xAxis.opposite since yAxis.opposite is missing, added copy of jsfiddle code, added note about multiple axes.)
（编辑：Doc 需要链接到 xAxis.opposite，因为缺少 yAxis.opposite，添加了 jsfiddle 代码的副本，添加了关于多个轴的注释。）
