Chartjs仅对*某些*客户

Question

我正在研究几个Chart.js图表​​并发现了一些奇怪的行为。

在这个小提琴中：http://jsfiddle.net/h42tv3xv/按下“日”，“周”或“月”按钮时，人们会遇到各种副作用。

它应该做什么： 只需刷新图表，显示可能的新信息（饼图和甜甜圈实际上没有任何新内容）

它应该做什么： 作为 some 的副作用，每次点击时<canvas>的大小都会增加。它适合我。但它并没有为很多其他人访问这个小提琴。这是一个屏幕截图：

为什么这对某些人而不是其他人这样做？我该如何解决这个问题？如果你很好奇，我最初会问一些关于这些图表的问题，但这可能有点related。

在我的浏览器和其他浏览器/计算机中可能导致这种情况的任何线索？

编辑，我意识到小提琴很大，所以这就是我在做的事情：

// 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"));

然后我添加（对于每个按钮）一个事件监听器，它会销毁每个画布，并创建一个带有新信息的新画布。以下是“周”按钮的示例：

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"));


});

Answer 1

将元素包裹在包装内，并将其最大宽度设置为80％或根据需要。

关闭响应能力。

查看此fiddle并告诉我您是否仍然在点击重新渲染时获得臃肿的图表。

<div class="wrapper">
    <canvas id="graph1" width="300" height="300"></canvas>

    <canvas id="graph2" width="250" height="250"></canvas>

    <canvas id="graph3" width="250" height="250"></canvas>  
</div>


.wrapper {
   max-width: 80%;
}

Answer 2

我将padding定义定义为canvas。我删除了padding，现在我没有调整大小。