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

ax6ht2ek  于 2023-10-21  发布在  Go
关注(0)|答案(3)|浏览(133)

我试图建立一个 Jmeter 板类型的网站与多个图表。我正在使用Django与FusionCharts和Postregsql数据库后端。我能够得到一个图表呈现,但我不能得到第二个出现在所有。我想这可能是我的www.example.com中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)
nle07wnf

nle07wnf1#

最后我发现了。原来在前面的代码中有一大堆问题。我想我会把它作为一个参考,有人在未来有同样的问题。代码如下:
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 %}
c86crjj0

c86crjj02#

您可以在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/>
xlpyo6sf

xlpyo6sf3#

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

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

相关问题