JSONでハイチャートを表示しようとしています。まず、ローカルのJSONファイルで作業するようにしています。後でそれはdjangoデータベースからデータを取得します。ハイチャート:JSONで空白のグラフを取得
私の問題は次のとおりです。空白のページが表示されています。
このチュートリアルより: Highcharts.com Tutorial: PREPROCESS DATA USING JSON。私はチュートリアルで与えられたサンプルデータが含まれている同じディレクトリ内のファイルを、作成したほか
<!DOCTYPE html>
<html>
<head>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<script type='text/javascript'>
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'spline'
},
series: [{}]
};
$.getJSON('data.json', function(data) {
options.series[0].data = data;
var chart = new Highcharts.Chart(options);
});
});
</script>
</body>
</html>
:私は、次のコードを作りました。
頭の中のどのスクリプトが本当に必要か、どれが欠けているのか分かりません。 「あなたの最初のチャート」のチュートリアルでは、highcharts.jsをインクルードするよう指示していますが、jqueryも必要です。
実際、数日前にそれは(?)のように機能しました。私はすでに多くのトラブルシューティングを行ったので、本当にうれしく思いました。その後、私はさらにJSONのレスポンで作業するようになり、空白のページが作成されました。今、私はそれが再びローカルファイルで動作していないことを把握することはできません。
このチュートリアル:Knowckstakc.com: different ways of loading highcharts dataもあります。私が彼のソリューションのいずれかをコピーすると、私が見ているのは、チャートがあるはずの空白のスポットでもあります。
ありがとうございました。
編集:私のdata.jsonファイル:
[
[1,12],
[2,5],
[3,18],
[4,13],
[5,7],
[6,4],
[7,9],
[8,10],
[9,15],
[10,22]
]
ステータスが> 400のコンソールまたはネットワークタブのすべてのjavascriptエラーはありますか? –
data.jsonを追加できますか? –
highcharts.jsが2回含まれているようです。あなたは一度だけそれを含めるべきです。 –