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("week"));});

解决方案

我在 canvas 中定义 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屋！