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。参考までに: F12 の切り替えに関係なく、IE9 では何も表示されません (予期される IE の動作?)。