Вопрос: используя django-nvd3 для построения диаграмм, диаграмма, не показывающая


Так что я пытался получить диаграмму, чтобы показать в django с 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)

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 (in chart.html)

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

4


источник


Ответы:


Кажется, что django-nvd3 не автоматически обертывает javascript как script,

Попробуйте окружить load_chart шаблонный тег в templates/chart.html с <script> тег:

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

0



Я просто обновляю документацию, чтобы исправить эту ошибку. 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)

1