Question

新年快乐！我为破坏或更新图表数据而烦恼，因此在重新加载图表时，它不会显示鼠标悬停时以前的数据。

我已经看过Chart.js's API page上的示例，并查看了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(...)时可以保存引用。

这有助于更快更流畅地绘制图表。

如何在此chart.js代码示例中销毁/更新Chart Data？

2 个答案: