正在尝试更新 chart.js 图表中的数据

Question

我想在图表中有一个动态数据集，它从 API 中获取值并将其用作图表中的数据。所以我希望图表显示数据，但相反，它没有显示任何控制台记录变量，该变量是一个包含函数内部数据的数组，其中图表什么都不显示，甚至 undefined，其他当元- 开发工具中的信息作为它所在的行（奇怪的是我在代码的早期有 console.logs ，但它首先显示了这个）。

我尝试创建一个名为 weatherData 的数组，最初它是空的。当在函数内部以 API 数据的对象文字形式作为参数时，它会执行以下操作。

function dataArray(data) {
  weatherData.length = 0;

  const { temp, feels_like, temp_min, temp_max } = data.main;

  weatherData.push(temp);
  weatherData.push(feels_like);
  weatherData.push(temp_min);
  weatherData.push(temp_max);

  return weatherData; 
}

然后在另一个名为 graphing 的函数中，它假设获取数组并析构它，然后像这样将每个索引用作数据部分内的数据，但显然甚至接收数组本身都无法正常工作，如控制台日志所示

const graphing = () => {
  // * Shows a blank log of it
  console.table(weatherData)
  
  // * Creating local variables from the array
  const [ temperature, feelsLike, minimumTemperature, maximumTemperature ] = weatherData;

  let ctx = document.getElementById('chart').getContext('2d');
  new Chart(ctx, {
      type: 'bar',
      data: {
          labels: ['Temperature', 'Feels Like', 'Maximum Temperature', 'Minimum Temperature'],
          datasets: [{
              label: 'Temperature',
              // * The data section
              data: [temperature, feelsLike, minimumTemperature, maximumTemperature],
              backgroundColor: [
                'rgba(255, 99, 132, 0.5)',
                'rgba(54, 162, 235, 0.5)',
                'rgba(255, 206, 86, 0.5)',
                'rgba(75, 192, 192, 0.5)'
              ],
              borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)'
              ],
              borderWidth: 2.5
          }]
      }...// * Other things that have been omitted, that are about how the graph should look like

调用了graphing的函数

Answer 1

通过清除图表的 canvas 元素的父元素来使用 DOM，并在重新创建 canvas 元素时，根据需要为其分配 chart 的 id在 ctx 的变量中，并将其附加到前 canvas 元素的父元素时确实有效。全部在 graphing 函数中，以及在需要的地方简单地调用绘图函数时。

正在尝试更新 chart.js 图表中的数据

Trying to update data in chart.js chart

javascript

arrays

function

destructuring

chart.js