Highcharts 双轴导航器

Question

我已经开始使用与双组合轴非常相似的图形。我从 highstocks 添加了导航器，但导航器图形与图形有很大不同。导航器似乎在同一列上绘制了两个系列，我无法为其配置两个轴。

我正在尝试修改 jsfiddle 示例，但我无法使其工作：

series: [{
        name: 'Rainfall',
        type: 'column',
        yAxis: 1,
        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],
        tooltip: {
            valueSuffix: ' mm'
        },
        showInNavigator: true

    }, {
        name: 'Temperature',
        type: 'spline',
        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],
        tooltip: {
            valueSuffix: '°C'
        },
        showInNavigator: true
    }]

http://jsfiddle.net/guconnmn/2/

Answer 1

您可以使用以下代码将这两个图添加到导航器中：

navigatorOptions: {
  type: 'column' //in the column series
}

和

navigatorOptions: {
  type: 'line' //in the line series
}

也就是说，我没有找到将每个系列放在导航器中自己的轴上的方法。此外，highstock不支持xAxiscategories，see API，highstock.xAxis只支持datetime格式。因此，如果这是您想要的输出，您将必须填写时间戳并将它们格式化为显示月份。

工作示例： http://jsfiddle.net/ewolden/p5amaofc/

API 在 series.navigatorOptions: https://api.highcharts.com/highstock/series.line.navigatorOptions

Answer 2

针对 ewolden 指出的问题，解决方法 如下：

I did not find a way to put each series on its own axis in the navigator.

您可以计算两个 y 轴最大值的比率，然后使用新值更新第二个系列中的所有点。这应该模仿第二个 y 轴的存在。

chart: {
    zoomType: 'x',
    events: {
      load: function() {
        var chart = this,
          navigator = chart.navigator,
          ratio = chart.yAxis[0].getExtremes().max / chart.yAxis[1].getExtremes().max;


        navigator.series[1].points.forEach(function(p) {
          p.update({
            y: p.y / ratio
          });
        }, false);

        this.redraw();
      }
    }
  }

现场演示： http://jsfiddle.net/kkulig/p44kx9xn/

Highcharts 双轴导航器

Highcharts dual axes navigator

navigator

highcharts

highstock