NVD3图表不会在Django中呈现

时间:2017-10-14 14:09:45

标签: django nvd3.js

我无法将我的nvd3饼图渲染出来。

我正在使用模板标签(简单标签)来返回构建饼图所需的数据。

已经验证:

  • 正在加载所有静态文件
  • 模板标记将正确的字典传递给模板
  • 正在加载所有模板
  • 没有错误
  • 图表似乎在源代码标题中加载

color-id.html(仅用于饼图的模板)

{% load static %}
<link media="all" href="{% static 'nvd3/build/nv.d3.css' %}" type="text/css" rel="stylesheet" />
<script type="text/javascript" src='{% static 'd3/d3.min.js' %}'></script>
<script type="text/javascript" src='{% static 'nvd3/build/nv.d3.min.js' %}'></script>

{% load nvd3_tags %}
{% load basic_deck_stats %}
<head>
    {% include_chart_jscss %}
    {% color_id deck as data %}
    {% load_chart data.charttype data.chartdata data.chartcontainer data.extra %}
</head>
<body>
    <h3>Color Identity</h3>
    {% include_container "asdf" 400 400 %}        
    charttype: {{ data.charttype }}<br>
    chartdata: {{ data.chartdata }}<br>
    chartcontainer: {{ data.chartcontainer }}<br>
    extra: {{ data.extra }}
</body>

basic_deck_stats.py(模板标签)

from django import template
from card_search.views import Card, Deck, Quantity
from django.shortcuts import render_to_response

register = template.Library()

@register.simple_tag
def color_id(deck):
    black=blue=red=white=green = 0
    queryset = Quantity.objects.filter(deck__deck_name=deck.deck_name).all()

    for item in queryset:
        if item.card.mana_cost:
            black += item.card.mana_cost.count("{B}") * item.qty
            blue += item.card.mana_cost.count("{U}") * item.qty
            red += item.card.mana_cost.count("{R}") * item.qty
            white += item.card.mana_cost.count("{W}") * item.qty
            green += item.card.mana_cost.count("{G}") * item.qty

    xdata = ["Black", "Blue", "Red", "White", "Green"]
    ydata = [black, blue, red, white, green]
    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 data

然后我从deck.html模板中调用饼图模板

{% include "../charts/color-id.html" %}

希望有足够的细节。 任何帮助将不胜感激!

亚历

0 个答案:

没有答案