使用 Django 在同一页面上显示多个 FusionCharts

问题描述 投票：0回答：3

我正在尝试构建一个包含多个图表的仪表板类型网站。我将 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()})

仪表板.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 %}

管理.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)
python django fusioncharts
3个回答
2
投票

我最终弄清楚了。事实证明，之前的代码存在大量问题。我想我会把它发布出来作为将来有同样问题的人的参考。正在运行的代码如下：

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()})

仪表板.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
投票

您只需在 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/>

0
投票

可以实现融合图的下钻功能。您可以使用单个数据源创建无限级别的向下钻取。父图表包含父图表以及所有后代（子、孙）图表的所有数据。

示例代码-

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": "Top 10 Most Populous Countries",
        "showValues": "0",
        "theme": "zune"
        }

    # Convert the data in the `Country` model into a format that can be consumed by FusionCharts. 
    # The data for the chart should be in an array where in each element of the array is a JSON object
    # having the `label` and `value` as keys.

    dataSource['data'] = []
    dataSource['linkeddata'] = []
    # Iterate through the data in `Country` model and insert in to the `dataSource['data']` list.
    for key in Country.objects.all():
      data = {}
      data['label'] = key.Name
      data['value'] = key.Population
      # Create link for each country when a data plot is clicked.
      data['link'] = 'newchart-json-'+ key.Code
      dataSource['data'].append(data)

      # Create the linkData for cities drilldown    
      linkData = {}
      # Inititate the linkData for cities drilldown
      linkData['id'] = key.Code
      linkedchart = {}
      linkedchart['chart'] = {
        "caption" : "Top 10 Most Populous Cities - " + key.Name ,
        "showValues": "0",
        "theme": "zune"
        }

      # Convert the data in the `City` model into a format that can be consumed by FusionCharts.    
      linkedchart['data'] = []
      # Filtering the data base on the Country Code
      for key in City.objects.all().filter(CountryCode=key.Code):
        arrDara = {}
        arrDara['label'] = key.Name
        arrDara['value'] = key.Population
        linkedchart['data'].append(arrDara)

      linkData['linkedchart'] = linkedchart
      dataSource['linkeddata'].append(linkData)

    # Create an object for the Column 2D chart using the FusionCharts class constructor                 
    column2D = FusionCharts("column2D", "ex1" , "700", "400", "chart-1", "json", dataSource)
    return render(request, 'index.html', {'output': column2D.render()})

要了解有关此功能的更多信息，请参阅 - https://www.fusioncharts.com/dev/getting-started/django/add-drill-down-using-django

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.