首页 > 编程语言> > javascript – 使用django-nvd3进行制图,图表未显示

javascript – 使用django-nvd3进行制图,图表未显示

2019-07-08 22:35:25 作者：互联网

所以我一直试图用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(来自firebug)

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

解决方法:

似乎django-nvd3不会自动将javascript包装为脚本.

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

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

标签：python,javascript,django,nvd3-js
来源： https://codeday.me/bug/20190708/1406783.html