Question

好的，基本上我尝试做的是使用Chart.js

为我的网站进行datadisplay

现在这个行为是在chrome中，我并不是真的专注于ie9 atm，因为它有自己的问题范围，并且不会显示事件。

问题是这样，第一次抽奖工作正常。然而，网站的本质意味着人们可能会远离它（整个网站是一系列隐藏或淡化的div，具体取决于点击的按钮），然后再回来查看格局。

尽管我付出了最大的努力，但是画布一遍又一遍地在画布上画出来，效果非常烦人，因为它意味着它们以不断更大的方式叠加在一起，就像Matryoshka娃娃一样，根据斑点的位置出现你的老鼠是。一般来说它一团糟。

现在告诉我的是，我已经尝试了以两种方式重绘画布的“大”两种方式无济于事。在绘制新的格拉斯特之前，这些方法似乎都无法实际破坏旧的格拉斯。

相关代码：

//GRAPTH FUNCTIONS.
function firstgDraw(){

//get canva 
var canvas1 = $('#g1').get(0);
var canvas2 = $('#g2').get(0);
var canvas3 = $('#g3').get(0);
var canvas4 = $('#g4').get(0);

//get canvas context
var canv1 = canvas1.getContext("2d");
var canv2 = canvas2.getContext("2d");
var canv3 = canvas3.getContext("2d");
var canv4 = canvas4.getContext("2d");

//hacky method
canvas1.width = canvas1.width;
canvas2.width = canvas2.width;
canvas3.width = canvas3.width;
canvas4.width = canvas4.width;

//clear canvas by clearing the rectangle.  
canv1.clearRect(0,0,canvas1.width,canvas1.height);
canv2.clearRect(0,0,canvas2.width,canvas2.height);
canv3.clearRect(0,0,canvas3.width,canvas3.height);
canv4.clearRect(0,0,canvas4.width,canvas4.height);

.....
var chart1 = new Chart(canv1).Line(data1,options);
var chart2 = new Chart(canv2).Line(data2,options);
var chart3 = new Chart(canv3).Line(data3,options);
var chart4 = new Chart(canv4).Line(data4,options);

注意我不同时使用te hacky和clear rect方法，我正在交换它们，行为完全相同。

每次按下“后退”按钮时，我也尝试过这样做。把上面的代码放在他们喜欢的那样

 $('#backtoMain').click(function(){     
        $('#DataDis').hide();
    //get canva 
    var canvas1 = $('#g1').get(0);
    var canvas2 = $('#g2').get(0);
    var canvas3 = $('#g3').get(0);
    var canvas4 = $('#g4').get(0);

    //get canvas context
    var canv1 = canvas1.getContext("2d");
    var canv2 = canvas2.getContext("2d");
    var canv3 = canvas3.getContext("2d");
    var canv4 = canvas4.getContext("2d");

    //hacky method
    canvas1.width = canvas1.width;
    canvas2.width = canvas2.width;
    canvas3.width = canvas3.width;
    canvas4.width = canvas4.width;

    //clear canvas by clearing the rectangle.  
    canv1.clearRect(0,0,canvas1.width,canvas1.height);
    canv2.clearRect(0,0,canvas2.width,canvas2.height);
    canv3.clearRect(0,0,canvas3.width,canvas3.height);
    canv4.clearRect(0,0,canvas4.width,canvas4.height);

        $("#dataField").fadeIn();
        event.preventDefault();
    });

Answer 1

很抱歉这个混乱，我现在用另一种方法来修复它。这些标准画布清除方法都没有工作〜天知道为什么。我已经设法避免问题，检查是否需要重绘，以及是否只是在现有的grapths上销毁数据集而不是绘制全新的对象。

一个狡猾的人解决了一个hacky的工作，感谢尝试的人。我不推荐chart.js。

绘制图形时清除画布的问题

1 个答案: