Multiple FusionCharts on Same page with Django

问题

I am trying to build a dashboard type site with multiple charts. I am using Django with FusionCharts and a Postregsql database backend. I am able to get one chart to render, but I can't get a second one to appear at all. I think it is probably something in my views.py with how I am creating the functions. Any help is much appreciated.

Code is as follows:

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)

回答1:

I ended up figuring it out. It turns out there were a boatload of problems in the previous code. I figured I'd post it as a reference for someone having the same question in the future. The code that is working is as follows:

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 %}

回答2:

You can just split the screen in HTML, and it will work as below

{{ chartTitle|safe }}

        <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/>

来源：https://stackoverflow.com/questions/51586150/multiple-fusioncharts-on-same-page-with-django