Question

我一直试图通过Django显示Highchart图，但是徒劳无功。请参阅下文，我从浏览器中的视图源模式获得的hmtl代码...图形数据集很好地传递并显示在代码中，但图形不会显示在页面上，我从javascript控制台得到没有错误。

我在这里缺少什么？

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

Answer 1

两件事：

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"

进行这两项更改会使您的示例正常工作。

高清图不通过Django显示

1 个答案: