Javascript Highcharts：使用JSON获取空白图表_Javascript_Jquery_Json_Charts_Highcharts

Javascript Highcharts：使用JSON获取空白图表

javascript jquery json charts highcharts

Javascript Highcharts：使用JSON获取空白图表,javascript,jquery,json,charts,highcharts,Javascript,Jquery,Json,Charts,Highcharts,我试图用JSON显示Highcharts。首先，我尝试让它与本地JSON文件一起工作。稍后，它将从django数据库获取数据我的问题是：我得到了一个空白页从本教程中： . 我编写了以下代码： <!DOCTYPE html> <html> <head> <script src="http://code.highcharts.com/highcharts.js"></script> <script src="ht

我试图用JSON显示Highcharts。首先，我尝试让它与本地JSON文件一起工作。稍后，它将从django数据库获取数据

我的问题是：我得到了一个空白页

从本教程中： . 我编写了以下代码：

<!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>

我看到很多人都有不同的解决方案。所以我写下这篇文章，希望它能在将来帮助人们

我所遇到的一个问题是，我花了太多时间寻找一个可行的解决方案，而没有解决问题。老实说，我并不知道这件事

打开浏览器控制台并读取错误消息

要解决这些问题：

铬亚胺： XMLHttpRequest无法加载127.0.0.1:8000/用户。请求的资源上不存在“Access Control Allow Origin”标头。因此，不允许访问源“null”

Firefox：已阻止跨源请求：同源策略不允许读取127.0.0.1:8000/用户的远程资源。（原因：缺少CORS标头“访问控制允许原点”）

我做了以下工作：

为避免交叉冲突，请安装Django CORS标头

pip install django-cors-headers

将Corsheader添加到我的REST框架中的my settings.py

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

...

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