canvas大小调整-IOS HTML5应用程序 – （图表JS）

我有一个奇怪的间歇性问题在图表JS（ http://www.chartjs.org/ ）在html5 IOS应用程序。

我已经在这里列出了我的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) 

尽pipe内联的重要风格 – canvas随机抽出一个巨大的图表版本，并改变高度/宽度值。

有没有其他人经历过这种行为？ 任何build议要解决？

Answer 1

我遇到了相同/类似的问题，并find了一个解决scheme：在先前使用的canvas（重新绘制以合并新的用户input数据，或绘制不同types的图表）时出现问题。 在“新鲜”的canvas上画画从来没有造成缩放问题。

因此，解决方法是在绘制之前用新的canvasreplace旧canvas。 在jQuery中：

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

Answer 2

在你的JavaScript中，你试图selectid为'lineChart'的元素，但是在你的HTML中，你要给这个元素一个id为'overallChart'的元素。 更改：

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

至：

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

Answer 3

尝试改变这一行：

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

至

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

看看这是否适合你