Chart.js清空canvas画布 clearRect()等canvas方法擦除失败（附完整代码）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_26906345/article/details/79497354

一、直接移除DOM对象方式

1.原因

clearRect()等canvas方法清空失败

2.方法

移除dom对象的方式

$('#canvas').remove();
$('#container').append('<canvas id="canvas"></canvas>');

二、完整代码

1.html

<div id="container">
    <canvas id="canvas"></canvas>
</div>

2.javascript

/**
 *擦除canvas画布
 */
function clearCanvas(){
    $('#canvas').remove();
    $('#container').append('<canvas id="canvas"></canvas>');
    container=document.getElementById("canvas");
    context=container.getContext("2d");
}

3.chart.js画图方法

function pieChart(){
    clearCanvas();
    window.myPie = new Chart(context, config);
}

var config = {
    type: 'pie',
    data: {
        datasets: [{
            data: [
                40,
                30,
                20,
                10
            ],
            backgroundColor: [
                window.chartColors.red,
                window.chartColors.orange,
                window.chartColors.green,
                window.chartColors.blue,
            ],
            label: 'Dataset 1'
        }],
        labels: [
            "优秀",
            "良好",
            "中等",
            "偏差"
        ]
    },
    options: {
        responsive: true,
        legend: {
            position: 'top',
        },
        title: {
            display: true,
            text: '饼状图'
        },
        animation: {
            animateScale: true,
            animateRotate: true
        }
    }
};

三、效果