创建垂直导航器以放大 Highchart

问题描述

我有一个很好的水平导航器图表，我想添加一个垂直导航器，但我不知道是否可行

官方文档中没有这方面的信息 https://api.highcharts.com/highcharts/yAxis

无论如何要实现这个吗？

图表代码：

public build(): any {
    return {
      time: {
        useUTC: false,},chart: {
        type: 'area',title: {
        text: this.title,subtitle: {
        text: this.subtitle,navigator: {
        enabled: true,maskFill: 'rgba(224,203,219,0.3)',scrollY: 
      },rangeSelector: {
        enabled: false,xAxis: {
        type: 'datetime',tickInterval: 3600 * 1000,title: {
          text: this.xAxisLabel,formatter() {
          return this.value;
        },yAxis: {
        title: {
          text: this.yAxisLabel,labels: {
          enabled: false,tooltip: {
        pointFormat: this.tooltipformat,plotOptions: {
        area: {
          marker: {
            enabled: true,symbol: 'circle',radius: 2,states: {
              hover: {
                enabled: true,series: this.series,exporting: {enabled: false},credits: {enabled: false},};
  }
}

解决方法

默认情况下，该功能在 Highstock 中不可用，但作为一种解决方法，您可以创建单独的图表，仅使用导航器，将其定位并与主图表连接。示例：

Highcharts.stockChart('container',{
    chart: {
        events: {
            load: createNavigatorChart
        }
    },yAxis: {
        startOnTick: false,endOnTick: false
    },...
});

function createNavigatorChart(e) {
    var baseChart = e.target,baseYAxis = baseChart.yAxis[0];

    Highcharts.stockChart('customNavigator',{
        chart: {
            inverted: true,marginTop: baseChart.plotTop,marginBottom: baseChart.chartHeight - (baseChart.plotTop + baseChart.plotHeight)
        },rangeSelector: {
            enabled: false
        },credits: {
            enabled: false
        },xAxis: {
            min: baseYAxis.min,max: baseYAxis.max,reversed: false,visible: false,events: {
                setExtremes: function(e) {
                    baseYAxis.setExtremes(e.min,e.max,true,false);
                }
            }
        },title: {
            text: ''
        },yAxis: {
            visible: false
        },navigator: {
            enabled: true,xAxis: {
                reversed: false
            },series: [{
                type: 'scatter',color: 'transparent',data: [
                    [baseYAxis.min,1],[baseYAxis.max,2]
                ]
            }]
        }
    });
}

---

现场演示： http://jsfiddle.net/BlackLabel/8ac9qbt6/

API 参考： https://api.highcharts.com/highstock/chart.events.load