更新Chart js中的圖表

Question

import Chart from "chart.js"

let AnalyticsChart = {

  buildChart() {
    let ctx = document.getElementById("analyticsChart");
    let labels = ["sent", "delivered", "undelivered", "clicks"];

    let total_sent = parseInt(document.getElementById("total-sent").dataset.totalSent);
    let delivered = parseInt(document.getElementById("deilvered-count").dataset.deliveredCount);
    let undelivered = parseInt(document.getElementById("undelivered-count").dataset.undeliveredCount);
    let clicks = parseInt(document.getElementById("total-clicks").dataset.totalClicks);
    let counts = [total_sent, delivered, undelivered, clicks]
    let chart = new Chart(ctx, {
      type: 'doughnut',
      data: {
        labels: labels,
        datasets: [{
          data: counts,
          backgroundColor: [

            'rgba(54, 162, 235, 0.5)',
            'rgba(255, 206, 86, 0.5)',
            'rgba(255, 99, 132, 0.5)',
            'rgba(75, 192, 192, 0.5)'
          ]
        }] 
      },
      options: {

      }
    });

  },

  update(){

  }
}


export default AnalyticsChart

在這段代碼中，我想添加更新功能以更新圖表。 我想通過圖表變量來更新功能，我該怎么做？

像這樣

update(chart) {
    let total_sent = parseInt(document.getElementById("total-sent").dataset.totalSent);
    let delivered = parseInt(document.getElementById("deilvered-count").dataset.deliveredCount);
    let undelivered = parseInt(document.getElementById("undelivered-count").dataset.undeliveredCount);
    let clicks = parseInt(document.getElementById("total-clicks").dataset.totalClicks);
    let counts = [total_sent, delivered, undelivered, clicks]

    chart.data.datasets.forEach((dataset) => {
        dataset.data.push(counts) # How can I put individual counts value?
    });
    chart.update();
}

我的問題1.如何在buildChart（）中傳遞圖表變量以將函數更新為參數。 2.如何將單個counts元素放入dataset.data.push（counts）？

Answer 1

我不熟悉您的實施方式。 但似乎像Java，所以你需要的成員變量，並使用訪問它們this從每個功能。

let AnalyticsChart = {
    chart: null,
    buildChart() {
        /** omit **/
        this.chart = new Chart(ctx, {
    ~
    update() {
        /** omit **/
        this.chart.update();

對不起，我不太了解這個問題。
您是否要推送數據而不是更新？ 如果是這樣，您不能僅准備值。 （我的意思是，您需要標簽，背景...）
如果您只想更新圖表，那只是小菜一碟

this.chart.data.datasets.forEach((dataset) => {
    dataset.data = counts;
});

請記住，您只有一個數據集。 如果數據集不是動態的，我認為沒有必要循環。

this.chart.data.datasets[0].data = counts;