2013-07-29 6 views
1

Я пишу небольшой кусок кода javascript для отображения барчата в каркасе django с использованием высоких диаграмм. мой home.html содержитhighcharts не работает в django

{% 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 содержит

$(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"); работает хорошо, но график не отображается. Как сделать отображение?

+0

Вы можете увидеть какую-либо ошибку в консоли? –

+0

нет ошибки в консоли –

+0

У вас есть CSS для '# container'? Если бы вы не смогли изменить его на: '

'? –

ответ

2

У вас есть две ошибки в коде:

  • data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0 < - отсутствует ]
  • 'Saturday', < - trailling запятой

После фиксации это два небольших ошибок, он работает как charm: http://jsfiddle.net/Yrygy/50/

Смежные вопросы