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屋！