Question

在过去的几个小时里，我一直在Highcharts中使用rangeSelector挣扎。我启用了：input和allButtons，但这没有帮助。另外，我将x轴的min和max以及x轴的min范围也放了，仍然没有运气。这是我的图形初始化：

P.S。 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

高图范围选择器不显示

1 个答案: