【问题标题】:Multiple FusionCharts on Same page with Django使用 Django 在同一页面上的多个 FusionCharts
【发布时间】:2019-01-06 05:49:33
【问题描述】:

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

【问题讨论】:

    标签: python django fusioncharts


    【解决方案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 %}
    

    【讨论】:

      【解决方案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/>
      

      【讨论】:

        猜你喜欢
        • 2011-08-16
        • 1970-01-01
        • 2022-06-22
        • 2021-08-13
        • 1970-01-01
        • 2014-01-25
        • 2022-06-10
        • 1970-01-01
        • 2021-09-02
        相关资源
        最近更新 更多