通过bnjnm回答（在chart.html中）

Question

所以我一直试图用django-nvd3在django中显示一个图表。它与django-nvd3介绍中的代码基本相同。但它没有显示图表，它只打印显示图表所需的javascript。我希望有人能指出我正确的方向我可以看到脚本被找到了。 Firebug在标题中显示d3.min.js和nv.d3.min.js的内容我也尝试使用jquery，看看我是否可以使任何javascript工作，并且这很有用。

视图

def temp_chart_view(request):
    xdata = ["Apple", "Apricot", "avocado"]
    ydata = [10, 20, 30]
    chartdata = {'x': xdata, 'y': ydata}
    charttype = "pieChart"
    chartcontainer = 'piechart_container'
    data = {
        'charttype': charttype,
        'chartdata': chartdata,
        'chartcontainer': chartcontainer,
        'extra': {
            'x_is_date': False,
            'x_axis_format': '',
            'tag_script_js': False,
            'jquery_on_ready': False,
        }
    }
    return render_to_response('temperatures/chart.html', data)

URLPATTERN

url(r'chart/$', views.temp_chart_view, name='chart'),

温度/ chart.html

{% load nvd3_tags %}
<head>
    {% include_chart_jscss %}
    {% load_chart charttype chartdata chartcontainer extra %}
</head>
<body>
    <h1>tere</h1>

    {% include_container chartcontainer 400 600 %}
</body>

输出HTML（来自萤火虫）

<head>
    <link rel="stylesheet" type="text/css" 
        href="/static/nvd3/src/nv.d3.css" media="all">
    <script type="text/javascript" src="/static/d3/d3.min.js">
    <script type="text/javascript" src="/static/nvd3/nv.d3.min.js">
</head>
<body>
    nv.addGraph(function() {
        var chart = nv.models.pieChart();
        chart.x(function(d) { return d.label })
        .y(function(d) { return d.value });
        chart.height(450);

        chart.showLegend(true);
        chart.showLabels(true);
        d3.select('#piechart_container svg')
        .datum(data_piechart_container[0].values)
        .transition().duration(500)
        .attr('height', 450)
        .call(chart);

        return chart;
    });
    data_piechart_container=[{"values": [
        {"value": 10, "label": "Apple"}, 
        {"value": 20, "label": "Apricot"}, 
        {"value": 30, "label": "avocado"}
    ], "key": "Serie 1"}];


    <h1>tere</h1>

    <div id="piechart_container">
        <svg style="width:600px;height:400px;"></svg>
    </div>
</body>

通过bnjnm回答（在chart.html中）

<script>{% load_chart charttype chartdata chartcontainer extra %}</script>

Answer 1

我只是更新文档以纠正此错误。 django-nvd3默认不包含标记脚本，以便为添加javascript代码提供更大的灵活性。

可以设置一个额外的设置来输出标签，它叫做tag_script_js。

此代码应该可以正常工作：

xdata = ["Apple", "Apricot", "Avocado", "Banana", "Boysenberries", "Blueberries", "Dates", "Grapefruit", "Kiwi", "Lemon"]
ydata = [52, 48, 160, 94, 75, 71, 490, 82, 46, 17]
chartdata = {'x': xdata, 'y': ydata}
charttype = "pieChart"
chartcontainer = 'piechart_container'
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('piechart.html', data)

Answer 2

似乎django-nvd3并未自动将javascript包装为script。

尝试使用load_chart标记围绕templates/chart.html中的<script>模板标记：

<script>{% load_chart charttype chartdata chartcontainer extra %}</script>

使用django-nvd3进行制图，图表未显示

视图

URLPATTERN

温度/ chart.html

输出HTML（来自萤火虫）

通过bnjnm回答（在chart.html中）

2 个答案: