画布调整大小-IOS HTML5应用-(图表JS) [英] Canvas Re-sizing -IOS HTML5 App - (Chart JS)

问题描述

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

I'm having a strange intermittent issue with Chart JS (http://www.chartjs.org/) within a html5 IOS app.

我已经定义了我的画布，如下所示-

I have defined my canvas as listed here -

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

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

There are multiple charts in a page - the charts are triggered via a basic chart js settings -

 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)

尽管采用内联重要"样式，但画布会随机绘制出巨大的图表版本并更改高度/宽度值.

Despite the inline Important style - the canvas randomly draws out a huge version of the chart and alters the height /width values.

还有其他人经历过这种行为吗?有什么建议可以解决吗?

Has anyone else experienced this behaviour? Any suggestions to fix?

推荐答案

我遇到了相同/相似的问题，并找到了解决方案:在以前使用的画布上重新绘制(重新绘制以合并新用户)时出现了问题-输入数据，或绘制其他类型的图表(例如).在新鲜"画布上绘图永远不会引起缩放问题.

I have encountered the same/similar problem and found a solution: the problem arose when re-drawing on a previously used canvas (re-drawing to incorporate new user-input data, or drawing a different type of chart, for example). Drawing on a 'fresh' canvas never caused scaling issues.

因此，解决方案是在绘制之前，将用过的画布替换为新的画布.在jQuery中:

Therefore, the solution is to replace the used canvas with a new one, before drawing on it. In jQuery:

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

这篇关于画布调整大小-IOS HTML5应用-(图表JS)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！