时间戳

首页 > 解决方案 > 在 Chart js 中更新图表

javascript - 在 Chart js 中更新图表

问题描述

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. 如何将单个计数元素放入 dataset.data.push(counts) 中？

标签： javascriptchart.js

解决方案

我不熟悉你的工具的方式。但它看起来像 java，所以你需要成员变量，并使用this每个函数访问它们。

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

对不起，我不太明白这个问题2。
你想推送数据，而不是更新？如果是这样，你不能只准备值。（我的意思是，你需要标签、背景......）
如果你只是想更新图表，那是小菜一碟

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

请记住，您有一个数据集。如果数据集不是动态的，我认为没有必要循环。

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

推荐阅读