如何识别Highcharts数据组事件?

时间:2018-07-10 18:05:29

标签: javascript jquery highcharts highstock

当Highcharts将数据分组时,我想触发一条消息。我想显示一条消息,它是组数据,而不是真实数据。

我发现了一些禁用分组的信息:

dataGrouping: {enabled:false}

但是我想找到一个事件,当数据自动分组时会触发该事件。

我该如何实现?

$.getJSON('https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/large-dataset.json', function(data) {

  // Create a timer
  var start = +new Date();

  // Create the chart
  Highcharts.stockChart('container', {
    chart: {
      events: {
        load: function() {
          if (!window.TestController) {
            this.setTitle(null, {
              text: 'Built chart in ' + (new Date() - start) + 'ms'
            });
          }
        }
      },
      zoomType: 'x'
    },

    rangeSelector: {

      buttons: [{
        type: 'day',
        count: 3,
        text: '3d'
      }, {
        type: 'week',
        count: 1,
        text: '1w'
      }, {
        type: 'month',
        count: 1,
        text: '1m'
      }, {
        type: 'month',
        count: 6,
        text: '6m'
      }, {
        type: 'year',
        count: 1,
        text: '1y'
      }, {
        type: 'all',
        text: 'All'
      }],
      selected: 3
    },

    yAxis: {
      title: {
        text: 'Temperature (°C)'
      }
    },

    title: {
      text: 'Hourly temperatures in Vik i Sogn, Norway, 2009-2017'
    },

    subtitle: {
      text: 'Built chart in ...' // dummy text to reserve space for dynamic subtitle
    },

    series: [{
      name: 'Temperature',
      data: data.data,
      pointStart: data.pointStart,
      pointInterval: data.pointInterval,
      tooltip: {
        valueDecimals: 1,
        valueSuffix: '°C'
      }
    }]

  });
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

<div id="container" style="height: 400px; min-width: 310px"></div>

View on JSFiddle

1 个答案:

答案 0 :(得分:1)

可以通过检查hasGroupedData功能时检查generatePoints标志的状态来完成此操作。 hasGroupedDatagenearatePoints都属于Series对象。 Highcharts.wrap函数使代码变得简单:

 (function(H) {
   H.wrap(H.Series.prototype, 'generatePoints', function(proceed) {
     proceed.call(this);
     console.log('Data grouping applied: ' + (this.hasGroupedData === true));
   });
 })(Highcharts);

实时演示: http://jsfiddle.net/BlackLabel/djvrew2h/

注释forced: true,以检查未应用分组时功能如何工作。

有关包装的文档https://www.highcharts.com/docs/extending-highcharts/extending-highcharts