通过Django不显示Highchart图形

我一直试图通过Django显示一个Highchart图形，但徒劳无功。请参阅下面的代码，我从查看源代码模式中得到的hmtl代码来自我的浏览器...图表数据集很好地传递并显示在代码中，但该图不显示在页面上，来自JavaScript控制台的错误。通过Django不显示Highchart图形

我在这里错过了什么？

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 
    <title>Highcharts- Demo</title> 
    <style> 
     body{ 
      margin-top: 30px; 
      margin-left:40px; 
     } 
       pre { 
     border:1px solid red; 
     } 

    </style> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/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 style="width: 800px; margin: 2em auto; padding: 1em; border: 1px solid red; border-radius: 0.5em"> 
    Nicely plotted data in Highcharts. 
     </div> 
    <div id="chart_ID" class="chart" style="height:600px; width:100%"> 
    </div> 

<!-- Maps the Python template context variables from views.py to the Highchart js variables --> 
<script> 
    var chart_id = "chart_ID" 
    var chart = {"renderTo": "chart_ID", "type": "line", "height": 500} 
    var title = {"text": "my title goes here"} 
    var xAxis = {"categories": ["A", "B", "C", "D", "E", "F", "G"], "title": {"text": "Axis title goes here"}} 
    var yAxis = {"title": {"text": "Axis title goes here"}} 
    var series = [{"data": [1, NaN, 2, 3, NaN, 4, 5], "name": "Asia Pacific"}, {"data": [1, NaN, 2, 3, NaN, 4, 5], "name": "CIS"}, {"data": [1, NaN, 2, 3, NaN, 4, 5], "name": "Europe"}, {"data": [1, NaN, 2, 3, NaN, 4, 5], "name": "Latin America"}, {"data": [1, NaN, 2, 3, NaN, 4, 5], "name": "MENA"}, {"data": [1, NaN, 2, 3, NaN, 4, 5], "name": "Northern America"}, {"data": [1, NaN, 2, 3, NaN, 4, 5], "name": "SSA"}] 
</script> 

<!-- Highchart js. Variable map shown above --> 
<script> 
$(document).ready(function() { 
    $(chart_id).highcharts({ 
     chart: chart, 
     title: title, 
     xAxis: xAxis, 
     yAxis: yAxis, 
     series: series 
    }); 
}); 
</script> 

</body> 

</html>

来源

2017-09-05 Joss

两件事情：

1）该行有一个错字：

var xAxis = {"categories": ["A", "B", "C", "D", "E", "F", G"], "title": {"text": "Axis title goes here"}}

它应该是：

var xAxis = {"categories": ["A", "B", "C", "D", "E", "F", "G"], "title": {"text": "Axis title goes here"}}

2）您需要预先设置一个#您chart_id为了让jQuery找到它：

var chart_id = "#chart_ID"

使这两个更改都导致您的示例工作。

来源

2017-09-05 18:15:08

太棒了！非常感谢你，我一直在为这个问题困惑不已，非常感谢！ – Joss

通过Django不显示Highchart图形

回答

相关问题