javascript - Highchart 范围选择器不显示

Question

在过去的几个小时里，我在 Highcharts 中的 rangeSelector 上苦苦挣扎。我启用了:输入和所有按钮，但这没有帮助。另外，我已经为 x 轴设置了最小值和最大值，也为 x 轴设置了最小范围，但仍然没有运气。这是我的图表初始化:

附注dataPreparedForGraph 是一系列包含 javascript 日期和一些值的元素。

Highcharts.setOptions({
      global: {
          useUTC: false
      }
  });

  Highcharts.chart('graph', {
    chart: {
        type: 'scatter',
        zoomType: 'x',
        panning: true,
        panKey: 'shift'
    },
    title: {
        text: tableName
    },
    xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: {
            month: '%e. %b',
            year: '%b'
        },
        title: {
            text: 'Date'
        },
        min: timestamp_label[0].getTime(),
        max: timestamp_label[timestamp_label.length - 1].getTime(),
        minRange: 3600
    },
    yAxis: {
        title: {
            text: 'Sensor value'
        }
    },
    tooltip: {
        headerFormat: '<b>{series.name}</b><br>',
        pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
    },
    plotOptions: {
      columnrange: {
        grouping: false
      },
      series: {
        marker: {
          enabled: true
        },
      }
    },
    rangeSelector: {
      enabled: true,
      inputEnabled: true,
      allButtonsEnabled: true,
      buttons: [
        {
          type: 'minute',
          count: 1,
          text: 'minute'
        },{
          type: 'hour',
          count: 1,
          text: 'hour'
      },{
          type: 'day',
          count: 1,
          text: 'day'
      }, {
          type: 'week',
          count: 1,
          text: 'week'
      }],
      buttonTheme: {
          width: 60
      },
      selected: 2
    },
    series: dataPreparedForGraph
  });

Answer 1

范围选择器仅适用于 Highstock。

要使用它，您需要更改源代码:

<script src="https://code.highcharts.com/stock/highstock.js"></script>

并使用stockChart构造函数:

Highcharts.stockChart('graph', {...});

<小时/>

现场演示: http://jsfiddle.net/BlackLabel/mtkcg6aj/

文档: https://www.highcharts.com/docs/stock/understanding-highstock