Question

我正在尝试构建具有多个图表的仪表板类型的网站。我将Django与FusionCharts和Postregsql数据库后端一起使用。我可以绘制一张图表，但根本看不到第二张图表。我认为这可能是我在views.py中创建函数的方式。非常感谢您的帮助。

代码如下：

views.py

from django.shortcuts import render
from django.http import HttpResponse


# Include the `fusioncharts.py` file that contains functions to embed the charts.
from .fusioncharts import FusionCharts

from .models import *

# The `chart` function is defined to load data from a `Country` Model.
# This data will be converted to JSON and the chart will be rendered.

def chart(request):
    # Chart data is passed to the `dataSource` parameter, as dict, in the form of key-value pairs.
    dataSource = {}
    dataSource['chart'] = {
        "caption": "Final Sale Price by Customer",
        "showValues": "0",
        "theme": "fint"
        }
    dataSource['data'] = []
    for key in Customer.objects.all():
      data = {}
      data['label'] = key.customername
      data['value'] = key.Final_Price
      dataSource['data'].append(data)
    column2D = FusionCharts("column2D", "ex1", "600", "350", "chart-1", "json", dataSource)
    return render(request, 'dashboard.html', {'output': column2D.render()})


def chart2(request):
    # Chart data is passed to the `dataSource` parameter, as dict, in the form of key-value pairs.
    dataSource2 = {}
    dataSource2['chart'] = {
        "caption": "Final Sale Price by Plant",
        "showValues": "0",
        "theme": "fint"
        }
    dataSource2['data'] = []
    for key in Customer.objects.all():
      data = {}
      data['label'] = key.customername
      data['value'] = key.Final_Price
      dataSource2['data'].append(data)
    column2D = FusionCharts("column2D", "ex1", "600", "350", "chart-2", "json", dataSource2)
    return render(request, 'dashboard.html', {'output2': column2D.render()})

dashboard.html

{% extends "index.html" %}
{% load static %}

{% block title %}{{title}}{% endblock title %}

{% block sidenav %}
    {% for page in page_list %}
    <li>
        <a href="{{page.permalink}}">{{page.title}}</a>
    </li>
    {% endfor %}
{% endblock sidenav %}
{% block content %}
{% autoescape off %}
{{ content }}
{% endautoescape %}
<p>
<table>
    <tr>
        <th>Customer</th>
        <th>Plant</th>
    </tr>
    <tr>
        <td><div id="chart-1">{{ output|safe }}</div></td>
        <td><div id="chart-2">{{ output|safe }}</div><h1>test</h1></td>
    </tr>
</table>
Page last Update: {{last_updated|date:'D d F Y' }}
</p>
{% endblock content %}

manage.py

from django.db import models

class Customer(models.Model):
    customername = models.CharField(max_length=250)
    Final_Price = models.CharField(max_length=50)

    def __unicode__(self):
        return u'%s %s' % (self.customername, self.Final_Price)

class Plant(models.Model):
    site = models.CharField(max_length=250)
    Final_Price = models.CharField(max_length=50)

    def __unicode__(self):
        return u'%s %s' % (self.site, self.Final_Price)

Answer 1

我最终弄清楚了。原来的代码中有很多问题。我想我会把它发布给以后有同样问题的人作为参考。起作用的代码如下：

views.py

from django.shortcuts import render
from django.http import HttpResponse


# Include the `fusioncharts.py` file that contains functions to embed the charts.
from .fusioncharts import FusionCharts

from .models import *

# The `chart` function is defined to load data from a `Country` Model.
# This data will be converted to JSON and the chart will be rendered.

def chart(request):
    # Customer
    dataSource = {}
    dataSource['chart'] = {
        "caption": "Final Sale Price by Customer",
        "showValues": "0",
        "theme": "carbon"
        }
    dataSource['data'] = []

    for key in Customer.objects.all():
      data = {}
      data['label'] = key.customername
      data['value'] = key.Final_Price
      dataSource['data'].append(data)

    plantdataSource = {}
    plantdataSource['chart'] = {
        "caption": "Final Sale Price by Plant",
        "showValues": "0",
        "theme": "carbon"
    }
    plantdataSource['data'] = []

    for key in Plant.objects.all():
      data = {}
      data['label'] = key.site
      data['value'] = key.Final_Price
      plantdataSource['data'].append(data)

    colchart = FusionCharts("column2D", "ex1", "1000", "350", "chart-1", "json", dataSource)
    plantchart = FusionCharts("column2D", "ex2", "1000", "350", "chart-2", "json", plantdataSource)

    return render(request, 'dashboard.html', {'output': colchart.render(), 'output2': plantchart.render()})

dashboard.html

{% extends "index.html" %}
{% load static %}

{% block title %}{{title}}{% endblock title %}

{% block sidenav %}
    {% for page in page_list %}
    <li>
        <a href="{{page.permalink}}">{{page.title}}</a>
    </li>
    {% endfor %}
{% endblock sidenav %}
{% block content %}
{% autoescape off %}
{{ content }}
{% endautoescape %}
<p>
<table>
    <tr>
        <th>Customer</th>
        <th>Plant</th>
    </tr>
    <tr>
        <td><div id="chart-1">{{ output|safe }}</div></td>
        <td><div id="chart-2">{{ output2|safe }}</div></td>
    </tr>
</table>
Page last Update: {{last_updated|date:'D d F Y' }}
</p>
{% endblock content %}

Answer 2

您可以只用HTML分割屏幕，它将按以下方式工作

        <div style="width: 100%; overflow:auto;">
  <div style="float:left; width: 50%">
            <div id="chart-1" style="width: 50%;flaot: left;">{{ output|safe }}</div>
  </div>
<div style="float:right; width: 50%">
            <div id="chart-2">{{ pie_output|safe }}</div>
</div>
        </div>
<br/>

与Django在同一页面上的多个FusionCharts

2 个答案: