使用Djangonvd3绘制图表，图表不显示

2024-04-26 10:35:50 发布

您现在位置：Python中文网/ 问答频道 /正文
4112 3

所以我一直在尝试用django-nvd3显示一个图表。它与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)

URL模式

^{pr2}$

温度/图表.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回答（in图表.html)在

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

Tags： datacontainerchart图表jsscriptjavascriptmin
2条回答
网友
1楼 · 编辑于 2024-04-26 10:35:50

似乎django-nvd3没有自动将javascript包装为script。在

尝试在templates/chart.html中的load_chart模板标记周围加上<script>标记：

<script>{% load_chart charttype chartdata chartcontainer extra %}</script>
网友
2楼 · 编辑于 2024-04-26 10:35:50

我只是更新文档来纠正这个错误。默认情况下，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)

相关问题 更多 >

    编程相关推荐