highcharts 在 Django 中不起作用答案

【问题标题】：highcharts is not working in djangohighcharts 在 Django 中不起作用
【发布时间】：2013-07-28 22:43:15
【问题描述】：

我编写了一小段 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"); 运行良好，但图表未显示。如何让它显示？

【问题讨论】：

您能在控制台中看到任何错误吗？
控制台没有错误
你有 #container 的 CSS 吗？如果不是，您可以将其更改为：<div id="container" style="width:100%; height:400px;"></div>?
我改了但是没用

标签： javascript django highcharts

【解决方案1】：

您的代码中有两个错误：

data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0 ]
'Saturday',

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

【讨论】：