2016-12-05 6 views
1

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] 
] 
+1

ステータスが> 400のコンソールまたはネットワークタブのすべてのjavascriptエラーはありますか? –

+2

data.jsonを追加できますか? –

+2

highcharts.jsが2回含まれているようです。あなたは一度だけそれを含めるべきです。 –

答えて

0

私は別のソリューションでこの問題を持つ多くの人々を参照してください。だから私はこれを書いて、将来人々を助けることを願っています。

私がした1つの問題は、問題をトラブルシューティングするのではなく、実際の解決策を見つけるのに多すぎる時間を費やしたことでした。正直言って、私はそれをよく知りませんでした。

ブラウザを開き、コンソール

と読んエラーメッセージ

は、これらの問題を解決するには、次の のXMLHttpRequestは127.0.0.1:8000/usersをロードすることはできません。

Chromimium。要求されたリソースに「Access-Control-Allow-Origin」ヘッダーが存在しません。したがって、原点「ヌル」はアクセスが許可されません。

Firefoxの:ブロックされた クロスオリジン・リクエスト:同一生成元ポリシーが127.0.0.1:8000/usersでリモートリソースを読ん禁止します。 (理由:CORSヘッダー「Access-Control-Allow-Origin」がありません)。

私は次のことをやった:

Crossiteskripting競合がDjangoのCORSヘッダ

pip install django-cors-headers 

は私のRESTフレームワークでの私のsettings.pyにcorsheadersを追加インストールしないようにするには。

INSTALLED_APPS = (
    ... 
    'corsheaders', 
    ... 
) 

... 

MIDDLEWARE = [ # Or MIDDLEWARE_CLASSES on Django < 1.10 
    ... 
    'corsheaders.middleware.CorsMiddleware', 
    'django.middleware.common.CommonMiddleware', 
    ... 
] 

すべての交差文字を許可します。私はファイルの最後に書きました。

CORS_ORIGIN_ALLOW_ALL = True 
関連する問題