与Django在同一页面上的多个FusionCharts [英] Multiple FusionCharts on Same page with Django

问题描述

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

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.

代码如下:

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

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

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)

推荐答案

您只需将屏幕拆分为HTML，它将按以下方式工作

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

{{chartTitle | safe}}

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

这篇关于与Django在同一页面上的多个FusionCharts的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！