Question

如何在此 chart.js 代码示例中销毁/更新图表数据？

2019-01-02

1285

javascript chart.js

新年快乐！我正在纠结是否需要销毁或更新图表数据，以便在重新加载图表时，鼠标悬停时不会显示先前的数据。

我已经在 Chart.js 的 API 页面上看到了示例，并查看了 SO 上的许多示例，但似乎没有一个与我的代码由其他开发人员编写的方式相匹配。有人可以告诉我如何使用 myLineChart.destroy(); 或 myLineChart.update(); 吗？

代码：

// Display the chart
showChart = function (data, chartPosition) {
    console.log(chartPosition)
    new Chart(document.getElementById("line-chart-" + chartPosition), {
        type: 'line',    
        data: data,
        options: {
            legend: {
                position: 'bottom',
                fillStyle: Color,
                strokeStyle: Color,
                labels: {
                usePointStyle: true,
                fontSize: 12,
                boxWidth: 10,
            }
            },
            title: {
                display: true,
                text: 'Main Title'
            },
            tooltips: {
                callbacks: {
                title: function(tooltipItems, data) {
           return data.datasets[tooltipItems[0].datasetIndex].label;
                    },
                label: function(tooltipItem, data) {
            return "$" + Number(tooltipItem.yLabel).toFixed(0).replace(/./g, function(c, i, a) {
                return i > 0 && c !== "." && (a.length - i) % 3 === 0 ? "," + c : c;
            });
            }
    }
},
            scales: {
  xAxes: [{
  ticks: {
         callback: function(value, index, values) {
         return value + ' years';
                }
                }
  }],
                yAxes: [{
                    ticks: {
                        callback: function (value, index, values) {
                            return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                        }
                    }
                }]
            }
        }
    });
};

Answer 1

Chart.js 提供了一个辅助类，您可以通过该类访问页面上的所有图表实例。

如果您想在更新/重新加载之前销毁所有实例，请使用以下代码：

Chart.helpers.each(Chart.instances, function (instance) {
         instance.destroy();
    });

如果您想使用画布 ID 销毁特定图表，请使用以下代码：

Chart.helpers.each(Chart.instances, function (instance) {
        if (instance.chart.canvas.id === "yourChartId") {
            instance.destroy();
            return;
        }
    });

Answer 2

您可以直接修改图表使用的数据。

从那里的文档

function addData(chart, label, data) {
    chart.data.labels.push(label);
    chart.data.datasets.forEach((dataset) => {
        dataset.data.push(data);
    });
    chart.update();
}

function removeData(chart) {
    chart.data.labels.pop();
    chart.data.datasets.forEach((dataset) => {
        dataset.data.pop();
    });
    chart.update();
}

在这里，您可以将新数据与图表对象的引用一起传递。您可以在创建 new Chart(...) 时保存引用。

这有助于更快、更流畅地呈现图表。