javascript - highcharts 在 django 中不起作用

Question

我编写了一小段 javascript 代码，使用 highcharts 在 django 框架中显示条形图。我的 home.html 包含

{% extends "base.html" %}
{% block main_content %}
{% load staticfiles %}

<script src="{% static "js/day_of_week.js" %}"></script>

<button class="btn btn-primary" type="button" id="btn_day_of_week">Day of week</button>

<div id = "container">
</div>

{% endblock %}

static/js/day_of_week.js 包含

$(document).ready(function(){
       $('#btn_day_of_week').click(function(){

            //alert("day_of_week is clicked");

            $('#container').highcharts({
                chart: {
                    type: 'column'
                },
                title: {
                    text: 'Call Patterns in Week of Day'
                },

                xAxis: {
                    categories: [
                        'Sunday',
                        'Monday',
                        'Tuesday',
                        'Wednesday',
                        'Thursady',
                        'Friday',
                        'Saturday',
                    ]
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'call duration(sec)'
                    }
                },
                tooltip: {
                    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                        '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0
                    }
                },
                series: [{
                    name: 'Tokyo',
                    data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6]

                }, {
                    name: 'New York',
                    data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0]

                }, {
                    name: 'London',
                    data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0

                }, {
                    name: 'Berlin',
                    data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4]

                }]
            });


       });

     });

alert("day_of_week is clicked"); 运行良好，但图表未显示。如何让它显示出来？

Answer 1

您的代码中有两个错误:

• 数据:[48.9、38.8、39.3、41.4、47.0、48.3、59.0 <-- 缺少 ]
• '星期六', <-- 尾随逗号

修复这两个小错误后，它就像一个魅力:http://jsfiddle.net/Yrygy/50/