如何使用 django-nvd3 显示两个图形答案

【问题标题】：how to display two graph using django-nvd3如何使用 django-nvd3 显示两个图形
【发布时间】：2014-02-10 09:16:51
【问题描述】：

我正在使用 djano-nvd3 库在 django 中显示图形。我必须显示两个图表之一线图，另一个是饼图。折线图的 xdata[] 和 ydata[] 以及饼图的 xdata1[] 和 ydata1[]。

view.py

def demo_linechart_without_date(request):

extra_serie = {}
xdata = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
ydata = [3, 5, 7, 8, 3, 5, 3, 5, 7, 6, 3, 1]
xdata1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
ydata1 = [3, 5, 7, 8, 3, 5, 3, 5, 7, 6, 3, 1]
chartdata = {
    'x': xdata,
    'name1': 'series 1', 'y1': ydata, 'extra1': extra_serie,
}
chartdata1 = {
    'x': xdata1,
    'name1': 'series 1', 'y1': ydata1, 'extra1': extra_serie,
}
charttype = "lineChart"
charttype1 = "pieChart"
chartcontainer = 'linechart_container'
chartcontainer1 = 'linechart_container'# container name
data = {
    'charttype': charttype,
    'chartdata': chartdata,
    'chartcontainer': chartcontainer,
    'charttype1': charttype1,
    'chartdata1': chartdata1,
    'chartcontainer1': chartcontainer1,
    'extra': {
        'x_is_date': False,
        'x_axis_format': '',
        'tag_script_js': True,
        'jquery_on_ready': False,
    },
    'extra1': {
        'x_is_date': False,
        'x_axis_format': '',
        'tag_script_js': True,
        'jquery_on_ready': False,
    }
}
return render_to_response('linechart.html', data)

linechart.html

  {% extends "base.html" %}
  {% block content %}
  {% load nvd3_tags %}
 <head>
{% include_chart_jscss %}
{% if date_tag %}
    {% load_chart charttype chartdata chartcontainer  True "%d %b %Y %H" %}
    {% load_chart charttype1 chartdata1 chartcontainer1  True "%d %b %Y %H" %}
{% else %}
    {% load_chart charttype chartdata chartcontainer extra  %}
    {% load_chart charttype1 chartdata1 chartcontainer1 extra1  %}
{% endif %}
 </head>
 <body>
  {% include_container chartcontainer 400 600 %}
{% include_container chartcontainer1 400 600 %}
 </body>
{% endblock %}

【问题讨论】：

标签： django python-3.x

【解决方案1】：

我认为你的代码有问题。

chartcontainer = 'linechart_container'
chartcontainer1 = 'linechart_container'# 容器名称

如果您查看生成的“linechart.html”中的 html 代码，应该有两个具有相同 id 的 div：

div id="linechart_container"

所以我建议你改变

chartcontainer1 = 'linechart_container'（来自 view.py）

到：

chartcontainer1 = 'linechart_container1'

【讨论】：

【解决方案2】：

这对我有用：

{% extends "base.html" %}

{% load render_table from django_tables2 %}

{% load static %}

{% block content %}

<div class="col-sm-6">

{% load_chart charttype chartdata chartcontainer %} {% include_container chartcontainer 400 600 %}

</div>

<div class="col-sm-6">

{% load_chart charttype1 chartdata1 chartcontainer1 %}
{% include_container chartcontainer1 400 600 %}

</div>

{% 端块 %}

【讨论】：