Блог

Я пытаюсь обновить существующую свечу и пытаюсь установить новую (открыть, максимум, минимум, закрыть). Я перепробовал много кодов, но ни один из них не работает.

Вот мои усилия

 var chart; options = {  series: [{  data: [{  x: new Date(2016, 01, 01),  y: [51.98, 56.29, 51.59, 53.85]  },  {  x: new Date(2016, 02, 01), // This candle I am trying to update.  y: [53.66, 54.99, 51.35, 52.95]  },  {  x: new Date(2016, 08, 01),  y: [52.76, 57.35, 52.15, 57.03]  }] }],  chart: {  type: 'candlestick',  height: 350  },  title: {  text: 'BTC USDT',  align: 'left'  },  xaxis: {  type: 'datetime',  },  yaxis: {  tooltip: {  enabled: true  }  } }; chart = new ApexCharts(document.querySelector("#chart"), options);  chart.render(); chart.appendData({ // not updating existing candle data: [{  x: new Date(2016, 02, 01),  y: [51.98, 56.29, 51.59, 60]  }] });  chart.addPointAnnotation({// not working  x: new Date(2016, 02, 01),  y: [51.98, 56.29, 51.59, 60] });  chart.updateSeries([{ // NOT working data: [{  x: new Date(2016, 02, 01),  y: [51.98, 56.29, 51.59, 60]  }] }]);    /* chart.appendSeries({ // This is not updating same time candle  animation: false,  data: [{  x: new Date(2016, 01, 01),  y: [51.98, 56.29, 51.59, 49.85]  }] }) */ 

 lt;div id="chart"gt;lt;/divgt; lt;script src="https://cdn.jsdelivr.net/npm/apexcharts"gt;lt;/scriptgt; 

 y: [51.98, 56.29, 51.59, 53.85]  },  {  x: new Date(2016, 02, 01),  y: [53.66, 54.99, 51.35, 52.95]  },  {  x: new Date(2016, 08, 01),  y: [52.76, 57.35, 52.15, 57.03]  }] }],  chart: {  type: 'candlestick',  height: 350  },  title: {  text: 'BTC USDT',  align: 'left'  },  xaxis: {  type: 'datetime',  },  yaxis: {  tooltip: {  enabled: true  }  } }; chart = new ApexCharts(document.querySelector("#chart"), options);  chart.render(); chart.appendData({ // not updating existing candle data: [{  x: new Date(2016, 02, 01),  y: [51.98, 56.29, 51.59, 60]  }] });  chart.addPointAnnotation({// not working  x: new Date(2016, 02, 01),  y: [51.98, 56.29, 51.59, 60] });  chart.updateSeries([{ // NOT working data: [{  x: new Date(2016, 02, 01),  y: [51.98, 56.29, 51.59, 60]  }] }]);    /* chart.appendSeries({ // This is not updating same time candle  animation: false,  data: [{  x: new Date(2016, 01, 01),  y: [51.98, 56.29, 51.59, 49.85]  }] }) */  

Последние пару дней я возился с диаграммами, пытаясь решить аналогичную проблему.

Я получаю обновления через API WebSocket с помощью веб-работника, поэтому соединение не становится сонным через некоторое время/при бездействии. Я обнаружил, что для обновления свечи работает следующее:

 let candlestick;  let nextTimestamp = getNextTimestamp(initialChartData[initialChartData.length - 1].x);   worker.onmessage = event =gt; {  candlestick = this.transformDataKraken(event.data);  }   // Set up chart update  setInterval(() =gt; {  if (!candlestick) return;   const chartData = options.series[0].data;   if (candlestick.x lt; nextTimestamp) {  // Update candlestick  candlestick.x.setSeconds(0, 0);  chartData[chartData.length - 1] = candlestick;  } else {  // Time's up, add new candlestick  chartData.shift();  chartData.push(candlestick);   nextTimestamp = getNextTimestamp(nextTimestamp);  }   chart.updateSeries([{  data: chartData  }]);  }, 1000);  

getNextTimestamp просто добавляет 60 секунд к переданному значению.

Однако у меня все еще есть некоторые проблемы с тем, что график ведет себя странно и сжимает ширину свечей по прошествии некоторого времени/вкладка была неактивна, как будто размер массива изменился, хотя это явно не так.