0

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

我已将我的画布定义为此处列出的 -

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

尽管内联重要样式 - 画布随机绘制出一个巨大的图表版本并改变高度/宽度值。

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

4

3 回答 3

2

我遇到了相同/相似的问题并找到了解决方案：在以前使用的画布上重新绘制时出现了问题（例如，重新绘制以合并新的用户输入数据，或绘制不同类型的图表）。在“新”画布上绘图从未引起缩放问题。

因此，解决方案是在绘制之前用新的画布替换使用过的画布。在 jQuery 中：

$("#overallChart").replaceWith("<canvas id='overallChart' height='270' width='270'></canvas>");
var lineChart = new Chart(document.getElementById("overallChart").getContext("2d")).Line(lineData);
于 2014-05-31T09:15:32.010 回答
1

在您的 javascript 中，您尝试选择 id 为“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)
于 2013-10-19T06:39:53.753 回答
0

尝试更改此行：

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

至

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

看看这是否适合你。

于 2013-09-03T09:41:54.470 回答