Chart JS:旧图表数据未清除

基础概念

Chart.js 是一个流行的 JavaScript 图表库，用于创建各种类型的图表，如折线图、柱状图、饼图等。它提供了丰富的配置选项和交互功能。

类型

Chart.js 支持以下几种主要的图表类型：

折线图（Line Chart）
柱状图（Bar Chart）
饼图（Pie Chart）
雷达图（Radar Chart）
散点图（Scatter Chart）
气泡图（Bubble Chart）

应用场景

Chart.js 广泛应用于各种数据可视化场景，如数据分析、报表展示、监控系统等。

问题：旧图表数据未清除

原因

当你在同一个容器中更新图表数据时，如果没有正确清除旧的数据，可能会导致旧图表数据仍然显示在页面上。

解决方法

销毁旧图表实例：在创建新图表之前，先销毁旧的图表实例。
清除容器内容：手动清除图表容器的内容。

示例代码

// 假设你有一个 id 为 'myChart' 的图表容器
var ctx = document.getElementById('myChart').getContext('2d');

// 创建图表实例
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'My First dataset',
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45]
        }]
    },
    options: {}
});

// 更新图表数据
function updateChart(newData) {
    // 销毁旧图表实例
    if (myChart) {
        myChart.destroy();
    }

    // 创建新图表实例
    myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: newData.labels,
            datasets: [{
                label: 'My First dataset',
                backgroundColor: 'rgb(255, 99, 132)',
                borderColor: 'rgb(255, 99, 132)',
                data: newData.data
            }]
        },
        options: {}
    });
}

// 示例：更新图表数据
var newData = {
    labels: ['August', 'September', 'October', 'November', 'December'],
    data: [50, 60, 70, 80, 90]
};
updateChart(newData);