清楚Chart.js的画布缓存

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

一、直接移除DOM对象方式

1.原因

clearRect()等canvas方法清空失败

2.方法

移除dom对象的方式

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

二、完整代码

1.html

<div id="container">
    <canvas id="canvas"></canvas>
</div>
 
 
1
2
3

2.javascript

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

3.chart.js画图方法

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

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
        }
    }
};
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

三、效果

</article>