Highcharts在很多数据上返回未定义的值

时间:2018-03-08 09:05:45

标签: javascript highcharts undefined

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

[ClientCacheWithEtag(60)]

我不知道原因,但当我将范围更改为$.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 }] }); }); 时,值Allhighlowclosevolumeto。 我在JSON中没有空值。使用少量数据,所有值都会正确显示我不知道我做错了什么,该值正在返回undefined

这是我的代码:Jsfiddle

2 个答案:

答案 0 :(得分:2)

Highstock使用data grouping功能。在对数据进行分组时,在格式化程序中,您无法访问常规点,而是可以对这些值进行修剪和聚合的分组点进行分析。

如果这些点已分组,则它们具有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/

答案 1 :(得分:1)

同意@morganfree。

替代方法是使用series.userOptions.data并根据x值过滤掉,如下所示:

var currData = point.series.userOptions.data.filter(d => d.x == this.x)[0];

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

以下是JSFiddle