0

类似于THIS QUESTION，仅使用不同的图表库 ( CanvasJS )，并且包含我的代码。

图表仅在切换“开发人员工具”后出现（即从开-关或关-开切换）。

我正在使用的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta name="generator" content=
"HTML Tidy for Linux/x86 (vers 25 March 2009), see www.w3.org">
<script type="text/javascript" src="jquery-2.1.3.min.js">
</script>
<script type="text/javascript" src="jquery.canvasjs.min.js">
</script>
<script type="text/javascript">

var dataPoints = [];
(function () {
        $.getJSON('boop.little.json',
                function(thedata) {
                        $.each(thedata, function(i, v) {
                                dataPoints.push({ x: new Date(v.Datetime), y: parseFloat(v.Value) });
                        });
                }
        )
})();

$(function () {
        var options = {
                data: [{
                        type: "splineArea", //change it to column, spline, line, pie, etc
                        dataPoints: dataPoints
                        }
                ]
        };

        $("#chartContainer").CanvasJSChart(options);
});
</script>
<title></title>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<div id="chartContainer2" style="width:100%; height:300px;"></div>
</body>
</html>

JSON 来源：

[
    {
        "Datetime": "01/01/2012 00:00:01",
        "Value": "0.48"
    },
    {
        "Datetime": "01/01/2012 00:10:01",
        "Value": "0.50"
    },
    {
        "Datetime": "01/01/2012 00:20:01",
        "Value": "0.48"
    },
    {
        "Datetime": "01/01/2012 00:30:01",
        "Value": "0.49"
    },
    {
        "Datetime": "01/01/2012 00:40:01",
        "Value": "0.50"
    },
    {
        "Datetime": "01/01/2012 00:50:01",
        "Value": "0.47"
    },
    {
        "Datetime": "01/01/2012 01:00:01",
        "Value": "1.23"
    },
    {
        "Datetime": "01/01/2012 01:10:01",
        "Value": "2.09"
    },
    {
        "Datetime": "01/01/2012 01:20:01",
        "Value": "2.08"
    },
    {
        "Datetime": "01/01/2012 01:30:01",
        "Value": "2.64"
    },
    {
        "Datetime": "01/01/2012 01:40:01",
        "Value": "2.91"
    },
    {
        "Datetime": "01/01/2012 01:50:01",
        "Value": "0.49"
    },
    {
        "Datetime": "01/01/2012 02:00:01",
        "Value": "0.50"
    },
    {
        "Datetime": "01/01/2012 02:10:01",
        "Value": "0.49"
    },
    {
        "Datetime": "01/01/2012 02:20:01",
        "Value": "0.53"
    },
    {
        "Datetime": "01/01/2012 02:30:01",
        "Value": "0.51"
    }
]

有趣的是（以及它出现的原因），删除该行：

<div id="chartContainer2" style="width:100%; height:300px;"></div>

完全停止图表渲染！（即使使用切换开发人员工具）。这里发生了一些可疑的事情，有人可以建议进一步调试吗？

干杯，

-菲尔

PS。仅供参考：IE9 中没有显示任何内容，无论 F12 切换如何（预期的 IE 行为？）。

4

0 回答 0