Highcharts：使用JSON獲取空白圖表

Question

我試圖用JSON顯示Highcharts。 首先，我嘗試使用本地JSON文件。 稍后它會從django數據庫中獲取數據。

我的問題是：我得到一個空白頁面。

從本教程： Highcharts.com教程：使用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 respone，導致空白頁面。 現在我無法確定它與本地文件無法再次工作。

還有本教程： Knowckstakc.com：加載高圖數據的不同方法。 當我復制他的任何解決方案時，我看到的也是圖表應該是的空白點。

謝謝你的幫助。

編輯：我的data.json文件：

[
[1,12],
[2,5],
[3,18],
[4,13],
[5,7],
[6,4],
[7,9],
[8,10],
[9,15],
[10,22]
]

Answer 1

我看到很多人都有不同的解決方案。 所以我寫下來，並希望它將來會幫助人們。

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

打開瀏覽器控制台並閱讀錯誤消息

要解決這些問題：

Chromimium ：XMLHttpRequest無法加載127.0.0.1:8000/users。 請求的資源上不存在“Access-Control-Allow-Origin”標頭。 因此不允許原點'null'訪問。

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

我做了以下事情：

為避免Crossiteskripting Conflicts安裝Django CORS Headers

pip install django-cors-headers

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

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

...

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

並允許所有crossitescriptings。 我在文件的最后寫的。

CORS_ORIGIN_ALLOW_ALL = True

Highcharts：使用JSON獲取空白圖表

問題描述

1 個解決方案

解決方案1
0 2016-12-11 17:22:37

Highcharts：使用JSON獲取空白圖表

問題描述

1 個解決方案

解決方案1 0 2016-12-11 17:22:37

解決方案1
0 2016-12-11 17:22:37