Highcharts：使用JSON獲取空白圖表

我想用JSON顯示Highcharts。首先，我嘗試使用本地JSON文件來處理它。稍後它會從django數據庫獲取數據。Highcharts：使用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] 
]

來源

2016-12-05 Lunex

控制檯中的任何javascript錯誤或狀態> = 400的網絡選項卡上的任何請求？ –

你可以添加你的data.json嗎？ –

看起來你有兩次包含highcharts.js。你只應該包括一次。 –

我看到很多具有不同的解決方案這個問題的人。所以我寫下來並希望它能在將來幫助人們。

我做的一個問題是我花了太多時間找到一個工作解決方案，而不是解決問題。說實話，我並不知道它更好。

打開瀏覽器的控制檯和讀出的錯誤消息

爲了解決這些問題：

Chromimium：的XMLHttpRequest不能加載127.0.0.1:8000/users。請求的資源上沒有「Access-Control-Allow-Origin」標題。因此不允許原產地'null'訪問。

火狐：跨來源請求阻止：同源策略不允許在127.0.0.1:8000/users讀取遠程資源。（原因：缺少CORS頭'Access-Control-Allow-Origin'）。

我做了以下內容：

爲了避免衝突Crossiteskripting安裝Django CORS標頭

pip install django-cors-headers

的corsheaders添加到我的settings.py在我的REST框架。

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

... 

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

並允許所有crossitescriptings。我在文件的最後寫了什麼。

CORS_ORIGIN_ALLOW_ALL = True

來源

2016-12-11 17:22:37 Lunex

Highcharts：使用JSON獲取空白圖表

回答

相關問題