作者:陳小勳2502936731 | 来源:互联网 | 2023-05-21 12:02
我在基于引导程序的页面中有一个图表,我试图在页面调整大小时调整它的大小,以跟踪响应式设计的变化.所以我有这段代码:
function redrawChart() {
var w = $("#chart_container").width();
var c = document.getElementById("chart_canvas");
c.width = w;
c.height = w/2;
$("#chart_canvas").css("width", w);
$("#chart_canvas").css("height", w/2);
var chart_canvas = document.getElementById("chart_canvas").getContext("2d");
var line_chart= new Chart(chart_canvas).Line(data, options);
};
redrawChart();
var resizeTimer;
$(window).resize(function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(redrawChart, 250);
});
因此,在加载页面时调用一次redrawChart,然后调整每个页面的大小.
症状:当页面加载时,只要没有调整大小,一切都会完美运行.调整大小后,图表会闪烁,当鼠标悬停在图表上时会非常快速地调整大小.
这可能有什么不对?
1> Quince..:
在同一画布上重新创建图表之前,需要销毁图表.所以你可以像这样编辑你的重绘:
//declare outside so it can be resued and checked
var line_chart;
function redrawChart() {
//if we already have a chart destroy it then carry on as normal
if(line_chart)
{
line_chart.destroy();
}
var w = $("#chart_container").width();
var c = document.getElementById("canvas");
c.width = w;
c.height = w/2;
$("#chart_canvas").css("width", w);
$("#chart_canvas").css("height", w/2);
var chart_canvas = document.getElementById("canvas").getContext("2d");
line_chart= new Chart(chart_canvas).Bar(barChartData);
};
这是一个小提琴,所以你可以实际重新调整运行窗口的大小,看看它是否有效http://fiddle.jshell.net/leighking2/4apqqjL0/
这是你喜欢的片段
var randomScalingFactor = function () {
return Math.round(Math.random() * 100)
};
var barChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
}, {
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,0.8)",
highlightFill: "rgba(151,187,205,0.75)",
highlightStroke: "rgba(151,187,205,1)",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
}, {
fillColor: "rgba(15,18,20,0.5)",
strokeColor: "rgba(15,18,20,0.8)",
highlightFill: "rgba(15,18,20,0.75)",
highlightStroke: "rgba(15,18,20,1)",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
}]
}
var line_chart;
function redrawChart() {
if(line_chart)
{
line_chart.destroy();
}
var w = $("#chart_container").width();
var c = document.getElementById("canvas");
c.width = w;
c.height = w/2;
$("#chart_canvas").css("width", w);
$("#chart_canvas").css("height", w/2);
var chart_canvas = document.getElementById("canvas").getContext("2d");
line_chart= new Chart(chart_canvas).Bar(barChartData);
};
redrawChart();
var resizeTimer;
$(window).resize(function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(redrawChart, 250);
});