HighCharts Renko 图表在缩放后消失

Question

我使用了 HightCharts 库中的 this 示例来制作 Renko 图表，这个示例一切正常。但是当我使用自己的数据显示图表时它工作正常但是当我缩放图表时它消失了。不知道数据和例子一样是什么问题

以我的数据为例 https://jsfiddle.net/aypx6nfo/

缩放前。

缩放后

我的代码

function linearDataToRenko(data, change) {
  var renkoData = [],
    prevPrice = data[0][1],
    prevTrend = 0, // 0 - no trend, 1 - uptrend, 2 - downtrend
    length = data.length,
    i = 1;


  for (; i < length; i++) {
    if (data[i][1] - data[i - 1][1] > change) {
      // Up trend

      if (prevTrend === 2) {
        prevPrice += change;
      }

      renkoData.push({
        x: data[i][0],
        y: prevPrice,
        low: prevPrice,
        high: prevPrice + change
      });

      prevPrice += change;
      prevTrend = 1;
      
    } else if (Math.abs(data[i][1] - data[i - 1][1]) > change) {

      if (prevTrend === 1) {
        prevPrice -= change;
      }
      // Down trend
      renkoData.push({
        x: data[i][0],
        y: prevPrice,
        low: prevPrice - change,
        high: prevPrice,
        color: 'black'
      });

      prevPrice -= change;
      prevTrend = 2;
    }
  }
  return renkoData;
}


$.getJSON(`https://api.twelvedata.com/time_series?symbol=AAPL&interval=1day&apikey=MY-API-KEY&outputsize=500`, function(data) {
  let tempData = [];
    
    for (var i = 0; i < data.values.length; i++) {
      tempData.push([
        new Date(data.values[i].datetime),
        parseFloat(data.values[i].volume),
      ]);
    }
    
  // Create the chart
  Highcharts.stockChart('container', {
    rangeSelector: {
      selected: 1
    },

    title: {
      text: 'AAPL Stock Price'
    },

    series: [{
      name: 'AAPL',
      type: 'columnrange',
      fillColor: 'transparent',
      turboThreshold: 0,
      groupPadding: 0,
      pointPadding: 0,
      borderWidth: 1,
      data: linearDataToRenko(tempData, 1),
      dataGrouping: {
        enabled: false
      },
      tooltip: {
        valueDecimals: 2
      }
    }]
  });
});

Answer 1

您需要使用以毫秒为单位的时间戳作为 x 值并对数据进行排序。

  let tempData = [];

  for (var i = 0; i < data.values.length; i++) {
    tempData.push([
      new Date(data.values[i].datetime).getTime(),
      parseFloat(data.values[i].volume),
    ]);
  }

  tempData.reverse();

现场演示： https://jsfiddle.net/BlackLabel/f8sex6zj/

API参考：https://api.highcharts.com/highstock/series.columnrange.data

HighCharts Renko 图表在缩放后消失

HightCharts Renko chart disapear after zoom

javascript

charts

zooming

highcharts