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不支持xAxis categories，see API，highstock.xAxis仅支持日期时间格式。所以你必须填写时间戳并格式化它们以显示月份，如果这是你想要的输出。

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

series.navigatorOptions上的

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

Answer 2

对于 ewolden 指出的问题，解决方法：

我没有找到一种方法将每个系列放在自己的轴上导航仪。

您可以计算两个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双轴导航仪

2 个答案: