javascript - Canvas 调整大小-IOS HTML5 应用程序-(图表 JS)

Question

我在 html5 IOS 应用程序中遇到 Chart JS ( http://www.chartjs.org/) 的奇怪间歇性问题。

我已经按照此处列出的方式定义了我的 Canvas -

 <canvas id="overallChart" height="270" width="270" style="height:270px!important; width:270px!important;"></canvas> 

页面中有多个图表 - 图表通过基本图表 js 设置触发 -

 var lineData = {
labels : ["Jan","Feb","March","April","May"],
datasets : [
    {
        fillColor : "rgba(255,128,38,0.9)",
        strokeColor : "rgba(225,225,225,1)",
        pointColor : "rgba(225,225,225,1)",
        pointStrokeColor : "#fff",
        data : [65,59,90,81,56]
    },
    {
        fillColor : "rgba(119,62,20,0.9)",
        strokeColor : "rgba(225,225,225,1)",
        pointColor : "rgba(225,225,225,1)",
        pointStrokeColor : "#fff",
        data : [28,48,40,19,96]
    }
]
 }

 var lineChart = new Chart(document.getElementById("lineChart").getContext("2d")).Line(lineData)

尽管内联 Important 样式 - Canvas 随机绘制了一个巨大版本的图表并改变了高度/宽度值。

有没有其他人经历过这种行为？有任何修复建议吗？

Answer 1

我遇到了相同/相似的问题并找到了解决方案:在以前使用的 Canvas 上重新绘制时出现了问题(重新绘制以合并新的用户输入数据，或绘制不同类型的图表，例如).在“新鲜” Canvas 上绘图不会导致缩放问题。

因此，解决方案是先用新的 Canvas 替换用过的 Canvas ，然后再在上面绘图。在 jQuery 中:

$("#overallChart").replaceWith("<canvas id='overallChart' height='270' width='270'></canvas>");
var lineChart = new Chart(document.getElementById("overallChart").getContext("2d")).Line(lineData);