文章/答案/技术大牛

发布

社区首页 >问答首页 >Fusioncharts入门指南页面仍为空

问Fusioncharts入门指南页面仍为空
EN

Stack Overflow用户

提问于 2019-05-27 02:48:56

回答 1查看 348关注 0票数 0

我刚刚安装了DjangoSuiteXTv3.13.4，以便在我的( FusionCharts ) Django应用程序中使用。我已经完成了入门指南(https://www.fusioncharts.com/dev/getting-started/django/your-first-chart-using-django#installation-2)，但似乎无法使其正常工作。我没有得到一个错误，但我的页面仍然是完全空的。我不知道我做错了什么，我完全遵循了教程。

dash.html

<!-- 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>

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

urls.py

from django.shortcuts import render
from django.urls import path

from vsdk.dashboard.fusioncharts import FusionCharts
from . import views

from django.conf.urls import url, include

urlpatterns = [
    url(r'^$', views.myFirstChart, name = 'demo'),
]

python

django

fusioncharts

回答 1

Stack Overflow用户

发布于 2019-07-08 17:29:47

“入门指南”中的说明有点混乱，并且有一些错误。这是我的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@hotmail.com 8 2019年7月

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56316446

复制

相似问题

问Fusioncharts入门指南页面仍为空
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Fusioncharts入门指南页面仍为空EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Fusioncharts入门指南页面仍为空
EN