好的,基本上我尝试做的是使用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();
});
答案 0 :(得分:0)
很抱歉这个混乱,我现在用另一种方法来修复它。这些标准画布清除方法都没有工作〜天知道为什么。我已经设法避免问题,检查是否需要重绘,以及是否只是在现有的grapths上销毁数据集而不是绘制全新的对象。
一个狡猾的人解决了一个hacky的工作,感谢尝试的人。我不推荐chart.js。