Question

我刚刚安装了FusionCharts Suite XT v3.13.4，可以在我的（Python）Django应用程序中使用。我已经完成了入门指南（https://www.fusioncharts.com/dev/getting-started/django/your-first-chart-using-django#installation-2），但似乎无法正常工作。我没有收到错误，但是我的页面仍然完全空白。我不知道自己做错了什么，我完全按照教程进行操作。

dash.html

!pip list |grep -i sklearn

DEPRECATION: The default format will switch to columns in the future. You can use --format=(legacy|columns) (or define a format=(legacy|columns) in your pip.conf under the [list] section) to disable this warning.
sklearn-pandas (1.8.0)

views.py

<!-- Filename: app_name/templates/index.html -->
<!DOCTYPE html>
<html>

<head>
<title>FC-python wrapper</title>
{% load static %}
<script type="text/javascript" src="{% static "https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js" %}"></script>
<script type="text/javascript" src="{% static "https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js" %}"></script>
</head>

<body>
<div id="myFirstchart-container">{{ output|safe }}</div>
</body>

</html>

urls.py

from django.shortcuts import render
from django.http import HttpResponse


from collections import OrderedDict

# Include the `fusioncharts.py` file that contains functions to embed the charts.
#from fusioncharts import FusionCharts
from vsdk.dashboard.fusioncharts import FusionCharts

def myFirstChart(request):

    #Chart data is passed to the `dataSource` parameter, like a dictionary in the form of key-value pairs.
    dataSource = OrderedDict()

    # The `chartConfig` dict contains key-value pairs of data for chart attribute
    chartConfig = OrderedDict()
    chartConfig['caption'] = 'Countries With Most Oil Reserves [2017-18]'
    chartConfig['subCaption'] = 'In MMbbl = One Million barrels'
    chartConfig['xAxisName'] = 'Country'
    chartConfig['yAxisName'] = 'Reserves (MMbbl)'
    chartConfig['numberSuffix'] = 'K'
    chartConfig['theme'] = 'fusion'

    # The `chartData` dict contains key-value pairs of data
    chartData = OrderedDict()
    chartData['Venezuela'] = 290
    chartData['Saudi'] = 260
    chartData['Canada'] = 180
    chartData['Iran'] = 140
    chartData['Russia'] = 115
    chartData['UAE'] = 100
    chartData['US'] = 30
    chartData['China'] = 30

    dataSource['chart'] = chartConfig
    dataSource['data'] = []

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

    #Iterate through the data in `chartData` and insert into the `dataSource['data']` list.
    for key, value in chartData.items():
        data = {}
    data['label'] = key
    data['value'] = value
    dataSource['data'].append(data)


# Create an object for the column 2D chart using the FusionCharts class constructor
# The chart data is passed to the `dataSource` parameter.
    column2D = FusionCharts("column2d", "ex1" , "600", "400", "chart-1", "json", dataSource)

    return  render(request, 'dash.html', {'output' : column2D.render(), 'chartTitle': 'Simple Chart Using Array'})

Answer 1

“入门指南”中的说明有些混乱，并且存在一些错误。这是我的Fusionchart示例的工作版本。

Fusionchart示例

您可以使用FusionCharts在html中呈现图表。我基于Getting Started Guide编写了示例，并在此处和此处进行了调整以使其起作用。要复制，只需执行以下操作：

复制我的github代码，这将创建一个新的项目目录fusionchart_example。

git clone https://github.com/bvermeulen/fusionchart_example

树形结构应如下所示：

转到该文件夹并为Django创建一个虚拟环境，请注意我使用的是Python 3.6.8，但其他python 3.6或3.7也可以正常工作。

python -m venv ./venv

激活环境（Linux）

source ./venv/bin/activate

（或Windows）

./venv/scripts/activate

启用了虚拟环境的安装Django

pip install django==2.2.3

您现在可以运行该应用

python manage.py runserver

并在127.0.0.1:8000的浏览器中查看结果，如下所示：

克隆了github，尤其是settings.py时，您可以查看源代码，但是我在下面提供了urls.py，views.py和chart.html作为第一参考。

urls.py：

from django.urls import path
from render_graph import views

urlpatterns = [
    path('', views.chart, name='chart'),

]

views.py：

from django.shortcuts import render
from django.http import HttpResponse
from collections import OrderedDict

# Include the `fusioncharts.py` file that contains functions to embed the charts.
from fusioncharts import FusionCharts
from pprint import pprint

def chart(request):

    #Chart data is passed to the `dataSource` parameter, like a dictionary in the form of key-value pairs.
    dataSource = OrderedDict()

    # The `chartConfig` dict contains key-value pairs of data for chart attribute
    chartConfig = OrderedDict()
    chartConfig["caption"] = "Countries With Most Oil Reserves [2017-18]"
    chartConfig["subCaption"] = "In MMbbl = One Million barrels"
    chartConfig["xAxisName"] = "Country"
    chartConfig["yAxisName"] = "Reserves (MMbbl)"
    chartConfig["numberSuffix"] = "K"
    chartConfig["theme"] = "fusion"

    # The `chartData` dict contains key-value pairs of data
    chartData = OrderedDict()
    chartData["Venezuela"] = 290
    chartData["Saudi"] = 260
    chartData["Canada"] = 180
    chartData["Iran"] = 140
    chartData["Russia"] = 115
    chartData["UAE"] = 100
    chartData["US"] = 30
    chartData["China"] = 30

    dataSource["chart"] = chartConfig
    dataSource["data"] = []

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

    #Iterate through the data in `chartData` and insert into the `dataSource['data']` list.
    for key, value in chartData.items():
        dataSource["data"].append({'label':key, 'value': value})

    # print the datasource to see what will be rendered
    pprint(dataSource)

    # Create an object for the column 2D chart using the FusionCharts class constructor
    # The chart data is passed to the `dataSource` parameter.
    column2D = FusionCharts("column2d", "Oil_Reserves", "600", "400", "Oil_Reserves-container", "json", dataSource)

    context = {'output': column2D.render(), }

    return render(request, 'chart.html', context)

chart.html：

<!DOCTYPE html>
<html>
  <head>
    <title>Oil Reserves</title>
    {% load static %}
    <script type="text/javascript" src="{% static 'fusioncharts/types/fusioncharts.js' %}"></script>
    <script type="text/javascript" src="{% static 'fusioncharts/themes/fusioncharts.theme.fusion.js' %}"></script>

  <link rel="icon" href="data:,">
  </head>

  <body>
    <div id="Oil_Reserves-container">{{ output|safe }}</div>
  </body>

</html>

Fusioncharts表示这是一个试用版，因此请更好地检查是否涉及任何费用。让我知道您是否需要更多信息。祝你好运...

布鲁诺·韦尔穆伦（Bruno Vermeulen） bruno.vermeulen@hotmail.com 2019年7月8日

Fusioncharts入门指南页面仍然为空

1 个答案:

Fusionchart示例