django-nvd3 不显示任何图表

Question

我还是 python 3.4 和 django 1.7 的新手。我尝试使用 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 的某个地方读到："We use include the Javascript and CSS code for D3/NVD3." 所以我将这些语句添加到我的模板中：

<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>

Answer 1

确保您的 NVD3 和 D3 静态文件可用，然后检查 JS 控制台中是否存在任何类型的错误。

Answer 2

非常感谢 Areski Belaid (@areski) 帮助我找到问题所在。我改变了：

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

至：

    {% load_chart charttype chartdata chartcontainer extra %}

现在可以了。 :))

django-nvd3 不显示任何图表

django-nvd3 does not show any graph

python

django

charts

d3.js

nvd3.js