javascript - Highcharts 在大量数据时返回未定义的值

Question

我编写代码以返回图表中的值。我从 cryptocompare.com 获取数据(示例 JSON: link )这是使用 Highcharts 的代码:

$.getJSON("<?php echo $chartURL; ?>", function (data) {

    var seriesData = [];
    for (i=0; i<data.length; i++) {
      seriesData.push({
          x: data[i].time,
          y: data[i].open,
          high: data[i].high,
          low: data[i].low,
          close: data[i].close,
          volumeto: data[i].volumeto
      });
    }

    // Create the chart
    Highcharts.stockChart('container', {

        rangeSelector: {
          buttons: [
          {
            type: 'day',
            count: 1,
            text: '1d'
          }, {
            type: 'month',
            count: 1,
            text: '1m'
          }, {
            type: 'month',
            count: 6,
            text: '6m'
          }, {
            type: 'ytd',
            text: 'YTD'
          }, {
            type: 'year',
            count: 1,
            text: '1y'
          }, {
            type: 'all',
            text: 'All'
          }],
            selected: 0
        },

        title: {
            text: 'Chart'
        },
        tooltip:{
            formatter: function() {
                var point = this.points[0].point,
                    txt = '';

                // workaround display bug.
                var emptyline = '<span style="visibility: hidden;">-</span><br/>';
                txt += '<span style="font-size: 10px"><b>' + Highcharts.dateFormat('%A, %e %B %Y', point.x) + '</b></span><br/>\n';
                txt += emptyline;

                  console.log(point.close);
                  // console.log(points);
                  // console.log(point.point.options/1000);

                  var curr = 'USD';
                  txt +=  "<b>Price</b>: " + point.y + " " + curr +'<br/>';
              txt +=  "<b>Price</b>: " + point.y + " " + curr +'<br/>';
              txt +=  "<b>Close</b>: " + point.close + " " + curr +'<br/>';
              txt +=  "<b>High</b>: " + point.high + " " + curr +'<br/>';
              txt +=  "<b>Low</b>: " + point.low + " " + curr +'<br/>';
              txt +=  "<b>Volume</b>: " + point.volumeto + " " + curr +'<br/>';


                return txt;
            }
        },

        series: [{
              type: 'spline',
              name: 'Coin',
              data: seriesData,
              lineWidth: 2,
              pointInterval: 3 * 24 * 3600 * 1000, // three day
              marker: {
                  enabled: null, 
                  fillColor: "lightblue",
                  lineColor: "darkblue",
                  lineWidth: 1,
                  radius: 4
        },
        turboThreshold: 0
        }]
    });
});

我不知道为什么，但是当我将范围更改为All时，值:high、low、close、volumeto 是未定义。我的 JSON 中没有空值。使用少量数据时，所有值都会正确显示，我不知道我做错了什么，该值返回未定义。

这是我的代码:Jsfiddle

Answer 1

Highstock 使用 data grouping特征。当数据分组时，在格式化程序中，您无法访问常规点，但无法访问其值被 trim 和聚合的分组点。

如果这些点被分组，它们有 dataGroup属性，保存对获取原始数据有用的信息。

在格式化程序中，您可以执行以下操作:

formatter: function() {
  const series = this.points[0].series
  let point = this.points[0].point

  if (series.hasGroupedData) {
    const { start, length } = point.dataGroup
    const { cropStart } = series

    const points = series.options.data.slice(start + cropStart, start + cropStart + length)
    const groupedPoint = points.reduce((prev, curr) => ({
      high: Math.max(prev.high, curr.high),
      low: Math.min(prev.low, curr.low),
      volumeto: prev.volumeto + curr.volumeto
    }))

    groupedPoint.x = point.x
    groupedPoint.y = point.y
    groupedPoint.close = points[points.length - 1].close

    point = groupedPoint
  }

  ...

实例:https://jsfiddle.net/qhhusb6f/