Question

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

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

还有其他人遇到过这种行为吗？有什么建议可以解决吗？

Answer 1

我遇到了相同/类似的问题，并找到了解决方案：重新绘制以前使用的画布时出现问题（重新绘制以合并新的用户输入数据，或绘制不同类型的图表，例如）。借鉴新鲜的＆＃39; 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中，您尝试选择ID为“lineChart”的元素，但在HTML中，您为元素提供了“overallChart”的ID。变化：

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

看看它是否适合你。

画布重新调整大小-IOS HTML5应用程序 - （图表JS）

3 个答案: