django-nvd3不顯示任何圖形

我仍然是python 3.4和django 1.7的新手。我試圖用django-nvd3繪製圖表。我試圖運行是這樣的：django-nvd3不顯示任何圖形

class Report(TemplateView): 
    def report_page(request): 
     extra_serie = {} 
     xdata = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] 
     ydata = [3, 5, 7, 8, 3, 5, 3, 5, 7, 6, 3, 1] 
     chartdata = { 
      'x': xdata, 
      'name1': 'series 1', 'y1': ydata, 'extra1': extra_serie, 
     } 
     charttype = "lineChart" 
     chartcontainer = 'linechart_container' # container name 
     data = { 
      'charttype': charttype, 
      'chartdata': chartdata, 
      'chartcontainer': chartcontainer, 
      'extra': { 
       'x_is_date': False, 
       'x_axis_format': '', 
       'tag_script_js': True, 
       'jquery_on_ready': False, 
      } 
     } 
     return render_to_response('Report.html', data)

其中Report.html如下：

<head> 
    {% load nvd3_tags %} 
    <script type="application/javascript">{% load_chart charttype chartdata chartcontainer extra %}</script> 
</head> 
<body> 
    <div class="main"> 
     {% include_container chartcontainer 400 600 %} 
    </div> 
</body>

但沒有圖表確實出現。我從areski的某處讀到：「我們使用包含D3和NVD3的Javascript和CSS代碼。」所以我將這些陳述添加到我的模板中：

<link href="{% static "nvd3-master/build/nv.d3.css" %}" rel="stylesheet" type="text/css" media="screen" /> 
<script src="{% static "D3/d3.js" %}" type="text/javascript"></script> 
<script src="{% static "nvd3-master/build/nv.d3.min.js" %}" type="text/javascript"></script>

但是我的網頁上仍然沒有繪製圖表！下面是輸出HTML：

<head> 
    <link href="/static/nvd3-master/build/nv.d3.css" rel="stylesheet" type="text/css" media="screen" /> 
    <script src="/static/D3/d3.js" type="text/javascript"></script> 
    <script src="/static/nvd3-master/build/nv.d3.min.js" type="text/javascript"></script> 
    <script type="application/javascript"> 
    <script> 
    data_linechart_container=[{"key": "series 1", "yAxis": "1", "values": [{"y": 3, "x": 1}, {"y": 5, "x": 2}, {"y": 7, "x": 3}, {"y": 8, "x": 4}, {"y": 3, "x": 5}, {"y": 5, "x": 6}, {"y": 3, "x": 7}, {"y": 5, "x": 8}, {"y": 7, "x": 9}, {"y": 6, "x": 10}, {"y": 3, "x": 11}, {"y": 1, "x": 12}]}]; 
    nv.addGraph(function() { 
    var chart = nv.models.lineChart(); 
    chart.margin({top: 30, right: 60, bottom: 20, left: 60}); 
    var datum = data_linechart_container; 
    chart.color(d3.scale.category20().range()); 
      chart.yAxis 
      .tickFormat(d3.format(',.02f')); 
     chart.showLegend(true); 
     d3.select('#linechart_container svg') 
     .datum(datum) 
     .transition().duration(500) 
     .attr('height', 450) 
     .call(chart); 
    }); 
    </script> 
    </script> 
</head> 
<body> 
    <div class="main"> 
      <div id="linechart_container"><svg style="width:600px;height:400px;"></svg></div> 
    </div> 
</body>

來源

2015-08-31 Ahmad

非常感謝Areski Belaid（@areski）幫助我找到問題。我改變：

<script type="application/javascript">{% load_chart charttype chartdata chartcontainer extra %}</script>

到：

{% load_chart charttype chartdata chartcontainer extra %}

而現在它的工作原理。 :)）

來源

2015-09-01 16:35:58 Ahmad

確保您的NVD3和D3靜態文件可用，然後檢查是否有在JS控制檯中的任何類型的錯誤。

來源

2015-09-01 16:11:39 areski

django-nvd3不顯示任何圖形

回答

相關問題