为什么我的图表更新功能似乎没有任何作用？

Question

我不知道为什么当 destroy() 正常工作时图表更新不起作用。也许是因为它在函数中，后来导出了 idk

let labelArr = [];
let dataArr = [];

let data = {
  labels: labelArr,
  datasets: [
    {
      data: dataArr,
      label: "# of Amount",
      borderWidth: 1,
      borderColor: "#01a001",
      backgroundColor: "#01a001",
    },
  ],
};

let config = {
  type: "line",
  data,
  options: {
    scales: {
      y: {
        beginAtZero: false,
      },
    },
  },
};

function initChart(currentAccount) {
  currentAccount.transactions.forEach((t) => {
    const dateReady = currentUser.dateCreator(t.date);
    labelArr.push(dateReady);
    dataArr.push(t.amount);
  });
}

let chartUI = new Chart(document.getElementById("chart"), config);

function destroy(chartUI) {
  chartUI.data.datasets[0].data = [];
  chartUI.data.labels = [];
  labelArr = [];
  dataArr = [];
  chartUI.destroy();
}

function render(currentAccount, chartUI) {
  chartUI = new Chart(document.getElementById("chart"), config);

  currentAccount.transactions.forEach((t) => {
    const dateReady = currentUser.dateCreator(t.date);
    labelArr.push(dateReady);
    dataArr.push(t.amount);

    chartUI.data.datasets[0].data = dataArr;
    chartUI.data.labels = labelArr;
  });
  chartUI.update();
}

我想像那样点击更新它：

export const initSettings = function (currentAccount) {
  initChart(currentAccount);
};

export const updateUI = function (currentAccount) {
  destroy(chartUI);
  render(currentAccount, chartUI);

};

我希望更新但我得到的不是它而是画布已经在使用

  Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab eius esse repudiandae maxime, velit expedita id temporibus dicta consequatur eum.

我希望更新但我得到的不是它而是画布已经在使用

Answer 1

您的代码中的错误在函数中

render

。您将

chartUI

作为参数发送给函数，然后在函数内部为它分配一个

new Chart

。因此，函数中

chartUI

的值和外部的值是不同的（您可能假设分配的值将在函数范围之外可用，就像其他编程语言中的引用一样）。

然后，

destroy

函数总是在同一个

chartUI

对象上调用，并且在实际销毁在

chartUI

中创建的真正活跃的

render

没有任何效果。

所以，一个快速的解决方法是在函数的末尾添加一个

return chartUI;

render

，然后恢复新创建的图表对象：

chartUI = render(currentAccountGen(), chartUI);

在

updateUI

； jsFiddle.

但是，您正在使用的数据类型不需要整个销毁和重建模式（根据我的经验，实际上几乎没有）。只需分配新数据并调用

update

:

就足够了

let t0 = Date.now();
const currentAccountGen = ()=>{t0 += 2*24*1000*3600; return {
    transactions: Array.from({length: 10},
        (_, i)=>({date: t0+i*24*1000*3600, amount: 10+2*Math.random()+3*Math.cos(i/10*Math.PI)}))
}};

let labelArr = [];
let dataArr = [];

let data = {
    labels: labelArr,
    datasets: [
        {
            data: dataArr,
            label: "# of Amount",
            borderWidth: 1,
            borderColor: "#01a001",
            backgroundColor: "#01a001",
        },
    ],
};

let config = {
    type: "line",
    data,
    options: {
        scales: {
            x: {
                type: "time",
            },
            y: {
            //    beginAtZero: false, // default
            },
        },
    },
};

const chartUI = new Chart(document.getElementById("chart"), config);

function render(currentAccount, chartUI) {
    labelArr = [];
    dataArr = [];
    currentAccount.transactions.forEach((t) => {
        const dateReady = /*currentUser.dateCreator*/(t.date);
        labelArr.push(dateReady);
        dataArr.push(t.amount);
    });
    chartUI.data.datasets[0].data = dataArr;
    chartUI.data.labels = labelArr;
    chartUI.update();
}

render(currentAccountGen(), chartUI);
const hi = setInterval(function(){
    render(currentAccountGen(), chartUI);
}, 1000)

function stop(){
    clearInterval(hi);
    document.querySelector('#stopBut').disabled = true;
}

<button id='stopBut' onclick="stop()">Stop</button>
<div style="height:250px">
<canvas id="chart"></canvas>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.3.0/chart.umd.js" integrity="sha512-CMF3tQtjOoOJoOKlsS7/2loJlkyctwzSoDK/S40iAB+MqWSaf50uObGQSk5Ny/gfRhRCjNLvoxuCvdnERU4WGg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-adapter-date-fns.bundle.min.js"></script>