创建垂直导航器以放大 Highchart

Question

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

在官方文档中，没有这方面的信息 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},
    };
  }
}

Answer 1

默认情况下，该功能在 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

创建垂直导航器以放大 Highchart

Create a vertical navigator to zoom in Highchart

highcharts

highcharts-ng

angular