Chart.js饼图更新时开启图例（legend）无法渲染问题

问题描述 #

使用Chart.js绘制饼图，首次加载正常；执行destroy()后重新创建图表时，若设置legend.display: true，图表会直接消失且控制台无报错；将legend.display设为false时，图表可正常渲染但无图例。当前使用Chart.js 2.1.4，升级至新版本后问题仍存在。

问题复现代码（开启图例失效） #

chartList[0].destroy();
chartList[0] = new Chart($("#chart"), {
                type: "pie",
                data: {
                    datasets: [{
                        data: [15,20,30],
                        backgroundColor: ["rgba(255, 99, 132, 1)","rgba(255, 206, 86, 1)","rgba(54, 162, 235, 1)"],
                    }],
                    labels: ["Red","Yellow","Blue"],
                },
                options: {
                    legend: {
                        display: true,
                        position: 'bottom',
                    }
                }
            });

可正常渲染但无图例的代码 #

chartList[0].destroy();
chartList[0] = new Chart($("#chart"), {
                type: "pie",
                data: {
                    datasets: [{
                        data: [15,20,30],
                        backgroundColor: ["rgba(255, 99, 132, 1)","rgba(255, 206, 86, 1)","rgba(54, 162, 235, 1)"],
                    }],
                    labels: ["Red","Yellow","Blue"],
                },
                options: {
                    legend: {
                        display: false,
                        position: 'bottom',
                    }
                }
            });

解决方案 #

方案1：直接更新图表（推荐） #

无需销毁重建，使用Chart.js内置的update()方法直接更新数据和配置，这是官方推荐的更新方式：

// 获取目标图表实例
const targetChart = chartList[0];

// 更新数据
targetChart.data.labels = ["Red", "Yellow", "Blue"];
targetChart.data.datasets[0].data = [15, 20, 30];
targetChart.data.datasets[0].backgroundColor = [
    "rgba(255, 99, 132, 1)",
    "rgba(255, 206, 86, 1)",
    "rgba(54, 162, 235, 1)"
];

// 更新图例配置
targetChart.options.legend = {
    display: true,
    position: 'bottom'
};

// 刷新图表
targetChart.update();

方案2：销毁后清理DOM再重建 #

若必须销毁重建，需确保销毁后清空canvas容器并重新创建canvas元素，避免DOM残留导致的渲染异常：

const $chartCanvas = $("#chart");
const $container = $chartCanvas.parent();

// 销毁现有图表
chartList[0].destroy();

// 清空容器并重新创建canvas
$container.empty().append('<canvas id="chart"></canvas>');

// 重新初始化图表
chartList[0] = new Chart($("#chart"), {
    type: "pie",
    data: {
        datasets: [{
            data: [15,20,30],
            backgroundColor: ["rgba(255, 99, 132, 1)","rgba(255, 206, 86, 1)","rgba(54, 162, 235, 1)"],
        }],
        labels: ["Red","Yellow","Blue"],
    },
    options: {
        legend: {
            display: true,
            position: 'bottom',
        }
    }
});

方案3：固定图表容器尺寸 #

图例渲染时可能因容器尺寸自适应异常导致图表被挤出视图，给图表容器设置固定宽高：

/* 给图表父容器添加样式 */
.chart-container {
    width: 400px;
    height: 400px;
    margin: 0 auto;
}

内容的提问来源于stack exchange，提问作者Diego Sampaio