Question

与THIS QUESTION类似，仅使用不同的图表库（CanvasJS），并且包含我的代码。

图表仅在“开发者工具”之后出现。已经切换（即从开关或开关切换）。

代码I使用：

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

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

干杯，

-Phil

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

只有在Chrome中切换“开发者工具”（F12）时才会显示Javascript图表

0 个答案: