Chartjs的副作用只有*一些*客户 [英] Side effects from Chartjs for only *some* clients
问题描述
我正在处理一些Chart.js图表,发现了一些奇怪的行为。
在这个小提琴:。
任何线索可能会导致我的浏览器和其他浏览器/电脑?
编辑,我意识到小提琴很大,所以这是我基本上做的:
//分配和创建所有画布上下文
var ctx = $(#graph1)。get(0).getContext(2d);
var ctx2 = $(#graph2)。get(0).getContext(2d);
var ctx3 = $(#graph3)。get(0).getContext(2d);
//实例化新图表并传递生成的数据
var myChart = new Chart(ctx).Line(graph1Generator(day));
var myDoughnutChart = new Chart(ctx2).Doughnut(graph2Generator(day));
var myPieChart = new Chart(ctx3).Pie(graph3Generator(day));
然后我为每个按钮添加一个事件监听器来销毁每个画布,一个有新的信息。下面是周按钮的示例:
weekButton.addEventListener(click,function(){
myChart.destroy();
myChart = new Chart(ctx).Line(graph2Generator(Week));
myDoughnutChart.destroy();
myDoughnutChart = new Chart(ctx2).Doughnut(graph2Generator(week));
myPieChart.destroy();
myPieChart = new Chart(ctx3).Pie(graph3Generator周));
});
> padding 定义到我的画布
。我移除了 padding
,我现在没有调整大小。
I was working on a couple of Chart.js charts and have found some strange behavior.
In this fiddle: http://jsfiddle.net/h42tv3xv/ people have been getting a variety of side effects when pressing the buttons "Day", "Week", or "Month".
What it should do: Simply refresh the chart with potentially new information displayed(the pie and doughnut actually don't have anything new)
What it should not do:
As a side effect for some, it is growing the size of the <canvas>
on each click. It does it for me. But it doesn't do it for a lot of other people accessing this fiddle. Here is a screen shot:
Why is it doing this for some people and not others? How can I remedy this problem? If you are curious, I initially asked a question about something else about these charts, but this could be somewhat related.
Any clue what could be causing this in my browser and other browsers/computers?
Edit, I realize the fiddle is large, so this is what I am doing essentially:
// Assign and Create all canvas contexts
var ctx = $("#graph1").get(0).getContext("2d");
var ctx2 = $("#graph2").get(0).getContext("2d");
var ctx3 = $("#graph3").get(0).getContext("2d");
// Instantiate new charts and pass in generated data
var myChart = new Chart(ctx).Line(graph1Generator("day"));
var myDoughnutChart = new Chart(ctx2).Doughnut(graph2Generator("day"));
var myPieChart = new Chart(ctx3).Pie(graph3Generator("day"));
then I am adding (for each button) an event listener that destroys each canvas, and creates a new one with new information. Here is an example of the "week" button:
weekButton.addEventListener("click", function(){
myChart.destroy();
myChart = new Chart(ctx).Line(graph2Generator("Week"));
myDoughnutChart.destroy();
myDoughnutChart = new Chart(ctx2).Doughnut(graph2Generator("week"));
myPieChart.destroy();
myPieChart = new Chart(ctx3).Pie(graph3Generator("week"));
});
I had the same behaviour defining padding
definition to my canvas
. I removed padding
and I have no resizing now.
这篇关于Chartjs的副作用只有*一些*客户的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!