javascript - yAxis 仅用一个系列计算

Question

我正在使用 Highstock 绘制图表。

它显示许多系列，并且 y 轴是自动计算的，以显示添加到图表中的每个系列。
但我的一个系列比其他系列更重要。所以我想知道是否可以仅根据一个系列来计算我的 yAxis，无论其他系列是否超出绘图区域？ (设置选项，函数覆盖极值的计算...)

感谢任何帮助。

Answer 1

通过这种方式，必须知道更重要系列的最小值/最大值。

创建两个 y 轴，一个用于更重要的系列，另一个不可见:

yAxis : [
     {
         title: { text: 'Temperature (°C)' },
         plotLines: [{
             value: 0,
             width: 1,
             color: '#808080'
         }],
         min: {{Min Value}},
         max: {{Max Value}},
         startOnTick: false
     },{
         gridLineWidth: 0,
         minorGridLineWidth: 0,
         title: { text: '' },
         labels: {
             style:{ display: 'none' }
         },
         min: {{Same Min}},
         max: {{Same Max}},
         startOnTick: false
     }

]

并使用良好的 yAxis 定义您的系列:

 series: [{
            name: 'Tokyo', // More important serie
            yAxis: 0,
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }, {
            name: 'New York', // other serie
            yAxis: 1,
            data: [-40.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 124.1, 120.1, 114.1, 118.6, 2.5]
        }]

---

Live Demo

$(function() {
  $('#container').highcharts({
    title: {
      text: 'Monthly Average Temperature',
      x: -20 //center
    },
    subtitle: {
      text: 'Source: WorldClimate.com',
      x: -20
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
      ]
    },
    yAxis: [{
      title: {
        text: 'Temperature (°C)'
      },
      plotLines: [{
        value: 0,
        width: 1,
        color: '#808080'
      }, ],
      min: -10,
      max: 30
    }, {
      gridLineWidth: 0,
      minorGridLineWidth: 0,
      title: {
        text: ''
      },
      labels: {
        style: {
          display: 'none'
        }
      },
      min: -10,
      max: 30
    }],
    tooltip: {
      valueSuffix: '°C'
    },
    legend: {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'middle',
      borderWidth: 0
    },
    series: [{
      name: 'Tokyo',
      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
    }, {
      name: 'New York',
      yAxis: 1,
      data: [-40.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 124.1, 120.1, 114.1, 118.6, 2.5]
    }]
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>