highcharts 장고에서 작동하지 않습니다

Question

하이 차트를 사용하여 django 프레임 워크에서 barchart 표시하려면 자바 스크립트 코드의 작은 조각을 씁니다. 내 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 %} 

정적 /의 JS가/day_of_week.js가 alert("day_of_week is clicked");가 잘 작동하지만, 그래프가 표시되지 않는

$(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] 

       }] 
      }); 


     }); 

    }); 

이 포함되어 포함되어 있습니다. 디스플레이하는 방법?

Answer 1

당신은 당신의 코드에서 두 가지 오류가 : -

'Saturday', < ] 누락 -

• data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0 < 쉼표

을 trailling이 두 개의 작은 버그를 수정 한 후를, 그것은 같이 작동 매력 : http://jsfiddle.net/Yrygy/50/