我正在尝试与本帖子Multiple FusionCharts on Same page with Django中的操作相同，据我所知，我使用的方法与答案中的方法相同，但无效。我也曾尝试将图表放在答案中的表格中，但只能再次获得chart1。
我也无法单独显示chart2或chart3，也无法显示chart1的多个副本。下面发布的代码为chart1和chart2和chart3提供了chart1，但保留了空白（保留空间，但没有chart）。
使用Django 2.0.4，Python 3.6.3，内置于Django和Django开发服务器的SQLite。
如果有人可以发现我在做什么错，我将非常感激。
views.py（提取）
def charts(request):
'''Various Temperature Charts'''
#### TEMPERATURES TODAY CHART ##### CHART1
# DATA SERIES
lastdayevent = Event.objects.filter(reading='AMB', location = 'Hall').order_by('-date')[0] # get event from latest day
querydate = lastdayevent.date # Use last day with data rather than today. Allows testing with old database files.
qsH= Event.objects.filter( reading ='AMB', location = 'Hall', date = querydate).order_by('-time')
qsM= Event.objects.filter( reading ='AMB', location = 'Bed_Mstr',date = querydate).order_by('-time')
qsE= Event.objects.filter( reading ='EXT_TEMP', location = 'Bed_Mstr',date = querydate).order_by('-time')
datalist_hall = hourly_average_list(qsH)
datalist_bed = hourly_average_list(qsM)
datalist_ext = hourly_average_list(qsE)
series_hall = charts_getseries(datalist_hall, 'Hall')
series_bed = charts_getseries(datalist_bed, 'Master Bedroom')
series_ext = charts_getseries(datalist_ext, 'Outside')
# CHART SETUP
# Chart data is passed to the `dataSource` parameter, as dict, in the form of key-value pairs.
dataSource1 = {}
dataSource1['chart'] = {
"caption": "Temperatures Today",
"subCaption": str(querydate),
"xAxisName": "Hour",
"yAxisName": "Temp C",
#"lineThickness": "2",
#"numberPrefix": "",
"theme": "zune",
"showValues": "0",
"rotateLabels": "0",
"setAdaptiveYMin": "1",
}
# categories (x axis)dataSource1['categories'] = []
catlist = []
for i in range (24):
catlist.append({'label':str(i)})
dataSource1['categories'] = []
dataSource1['categories'].append({'category':catlist})
# add data series
dataSource1['dataset'] = []
dataSource1['dataset'].append(series_hall)
dataSource1['dataset'].append(series_bed)
dataSource1['dataset'].append(series_ext)
# Create an object for the 2D line chart using the FusionCharts class constructor
# parameters are: chart type, id, width, height, render at (html id in template), data format, datasource file
chart1 = FusionCharts("msline", "ex1" , "600", "450", "chart-1", "json", dataSource1)
####### 28 DAY TEMPS ##### CHART2, CHART3
# DATA SERIES - day and night
dusk = 68400 # 19:00 in seconds since midnight
dawn = 25200 # 07:00 in seconds since midnight
search_period = datetime.timedelta(days=28)
lastdayevent = Event.objects.filter(reading='AMB', location = 'Hall').order_by('-date')[0] # get event from latest day
querydate = lastdayevent.date - search_period # Use last day with data rather than today. Allows testing with old database files.
qsPeriod= Event.objects.filter(date__gte = querydate)
qsDay= qsPeriod.filter(time__range = (dawn, dusk))
qsNight= qsPeriod.exclude(time__range = (dawn, dusk))
# catlist is returned by daily_average_list, therefore have to overwite each time daily_average_list called
# catlist is created from qsDay (or night) as Hall, Ext, Master may have different days missing.
# daily_averages works on whole date set and adds "none" values for missing days. Keeps all series aligned
datalist_day_hall, catlist = daily_average_list(qsDay, 'HALL', 'AMB')
datalist_day_bed, catlist = daily_average_list(qsDay, 'Bed_Mstr', 'AMB')
datalist_day_ext, catlist = daily_average_list(qsDay, 'Bed_Mstr','EXT_TEMP' )
series_day_hall = charts_getseries(datalist_day_hall, 'Hall')
series_day_bed = charts_getseries(datalist_day_bed, 'Master Bedroom')
series_day_ext = charts_getseries(datalist_day_ext, 'Outside')
datalist_night_hall, catlist = daily_average_list(qsNight, 'HALL', 'AMB')
datalist_night_bed, catlist = daily_average_list(qsNight, 'Bed_Mstr', 'AMB')
datalist_night_ext, catlist = daily_average_list(qsNight, 'Bed_Mstr','EXT_TEMP' )
series_night_hall = charts_getseries(datalist_night_hall, 'Hall')
series_night_bed = charts_getseries(datalist_night_bed, 'Master Bedroom')
series_night_ext = charts_getseries(datalist_night_ext, 'Outside')
# Chart Setup chart 2 daytime
# Chart data is passed to the `dataSource` parameter, as dict, in the form of key-value pairs.
dataSource2 = {}
dataSource2['chart'] = {
"caption": "Daytime Temps Last 28 Days",
"subCaption": str(querydate),
"xAxisName": "Date",
"yAxisName": "Temp C",
#"lineThickness": "2",
#"numberPrefix": "",
"theme": "zune",
"showValues": "0",
"rotateLabels": "0",
"setAdaptiveYMin": "1",
}
# categories (x axis)dataSource1['categories'] = []
dataSource2['categories'] = []
dataSource2['categories'].append({'category':catlist})
# add data series
dataSource2['dataset'] = []
dataSource2['dataset'].append(series_day_hall)
dataSource2['dataset'].append(series_day_bed)
dataSource2['dataset'].append(series_day_ext)
# Create an object for the 2D line chart using the FusionCharts class constructor
chart2 = FusionCharts("msline", "ex2" , "600", "450", "chart-2", "json", dataSource2)
# Chart Setup chart 3 nighttime
# Chart data is passed to the `dataSource` parameter, as dict, in the form of key-value pairs.
dataSource3 = {}
dataSource3['chart'] = {
"caption": "Nighttime Temps Last 28 Days",
"subCaption": str(querydate),
"xAxisName": "Date",
"yAxisName": "Temp C",
#"lineThickness": "2",
#"numberPrefix": "",
"theme": "zune",
"showValues": "0",
"rotateLabels": "0",
"setAdaptiveYMin": "1",
}
# categories (x axis)dataSource1['categories'] = []
dataSource3['categories'] = []
dataSource3['categories'].append({'category':catlist})
# add data series
dataSource3['dataset'] = []
dataSource3['dataset'].append(series_night_hall)
dataSource3['dataset'].append(series_night_bed)
dataSource3['dataset'].append(series_night_ext)
# Create an object for the 2D line chart using the FusionCharts class constructor
chart3 = FusionCharts("msline", "ex3" , "600", "450", "chart-3", "json", dataSource3)
# BUILD TEMPLATE CONTEXT
context_dict = {'output1':chart1.render(),
'output2':chart2.render(),
'output3':chart3.render(),
}
return render(request, 'hsrvr/charts.html', context_dict)
模板图表.html
{% extends "hsrvr/main.html" %}
{% load static %}
{% block title %}Charts{% endblock %}
{% block addscripts %}
<script type="text/javascript" src="{% static "fusioncharts/fusioncharts.js" %}"></script>
<script type="text/javascript" src="{% static "fusioncharts/themes/fusioncharts.theme.fint.js" %}"></script>
{% endblock %}
{% block pagename %}Charts{% endblock %}
{% block content %}
<p>This page shows how the temperatures around the house have moved today.</p>
<h1>Temperature Movements Today</h1>
<div id="chart-1">{{ output1|safe }}</div>
<h1>28 Day Average Daytime Temperature</h1>
<p>This chart shows the daily average daytime (7am - 7pm) external and bedroom temperatures for the last 28 days.</p>
<div id="chart-2">{{ output2|safe }}</div>
<h1>28 Day Average Nighttime Temperature</h1>
<p>This chart shows the daily average nighttime (7pm - 7am) external and bedroom temperatures for the last 28 days.</p>
<div id="chart-3">{{ output3|safe }}</div>
{% endblock %}
dataSource1对象是;
{'chart'：{'caption'：'Temperatures Today'，'subCaption'： '2018-08-16'，'xAxisName'：'小时'，'yAxisName'：'Temp C'，'theme'： 'zune'，'showValues'：'0'，'rotateLabels'：'0'，'setAdaptiveYMin'： '1'}，'类别'：[{'category'：[{'label'：'0'}，{'label'：'1'}， {'label'：'2'}，{'label'：'3'}，{'label'：'4'}，{'label'：'5'}， {'label'：'6'}，{'label'：'7'}，{'label'：'8'}，{'label'：'9'}， {'label'：'10'}，{'label'：'11'}，{'label'：'12'}，{'label'：'13'}， {'label'：'14'}，{'label'：'15'}，{'label'：'16'}，{'label'：'17'}， {'label'：'18'}，{'label'：'19'}，{'label'：'20'}，{'label'：'21'}， {'label'：'22'}，{'label'：'23'}]}]]，'数据集'：[{'系列名称'： 'Hall'，'data'：[{'value'：'22.56'}，{'value'：'22.50'}，{'value'： '22 .50'}，{'value'：'22.50'}，{'value'：'22.46'}，{'value'：'22.43'}， {'value'：'22.44'}，{'value'：'22.48'}，{'value'：'22.59'}，{'value'： '22 .69'}，{'value'：'22.80'}，{'value'：'22.71'}，{'value'：'22.75'}， {'value'：'22 .75'}，{'value'：'22 .75'}，{'value'：'22 .60'}，{'value'： '22 .50'}，{'value'：'22.78'}，{'value'：'22.86'}，{'value'：'22.83'}， {'value'：'22.78'}，{'value'：'None'}，{'value'：'None'}，{'value'： 'None'}]}，{'seriesname'：'Master Bedroom'，'data'：[{'value'： '24 .01'}，{'value'：'24.18'}，{'value'：'24.30'}，{'value'：'24.34'}， {'value'：'24 .37'}，{'value'：'24 .43'}，{'value'：'24 .43'}，{'value'： '24 .01'}，{'value'：'23.43'}，{'value'：'23.68'}，{'value'：'23.66'}， {'value'：'23 .62'}，{'value'：'23 .62'}，{'value'：'23 .78'}，{'value'： '23 .81'}，{'value'：'23.87'}，{'value'：'23.93'}，{'value'：'23.89'}， {'value'：'23 .89'}，{'value'：'23 .89'}，{'value'：'23 .83'}，{'value'： 'None'}，{'value'：'None'}，{'value'：'None'}]}，{'seriesname'： '外部'，'数据'：[{'值'：'18 .67'}，{'值'：'18 .29'}，{'值'： '17 .95'}，{'value'：'18.14'}，{'value'：'18.06'}，{'value'：'18.05'}， {'value'：'17 .93'}，{'value'：'18 .39'}，{'value'：'17 .68'}，{'value'： '18 .00'}，{'value'：'17.53'}，{'value'：'17.50'}，{'value'：'16.96'}， {'value'：'15 .61'}，{'value'：'16 .51'}，{'value'：'18 .28'}，{'value'： '18 .87'}，{'value'：'19.45'}，{'value'：'18.97'}，{'value'：'18.23'}， {'value'：'17.25'}，{'value'：'None'}，{'value'：'None'}，{'value'： 'None'}]}]}
和dataSource2是;
{'chart'：{'caption'：'过去28天的白天温度'，'subCaption'： '2018-07-19'，'xAxisName'：'Date'，'yAxisName'：'Temp C'，'theme'： 'zune'，'showValues'：'0'，'rotateLabels'：'0'，'setAdaptiveYMin'： '1'}，“类别”：[{'category'：[20180719、20180720、20180724， 20180804、20180805、20180806、20180807、20180808、20180809、20180810， 20180811、20180812、20180813、20180814、20180815、20180816]}]， '数据集'：[{'系列名称'：'霍尔'，'数据'：[{'值'：'无'}， {'value'：'None'}，{'value'：'None'}，{'value'：'None'}，{'value'： 'None'}，{'value'：'None'}，{'value'：'None'}，{'value'：'None'}， {'value'：'None'}，{'value'：'None'}，{'value'：'None'}，{'value'： 'None'}，{'value'：'None'}，{'value'：'None'}，{'value'：'None'}， {'value'：'None'}，{'value'：'None'}]}，{'seriesname'：'Master 卧室”，“数据”：[{'value'：'None'}，{'value'：'None'}，{'value'： 'None'}，{'value'：'None'}，{'value'：'27.42'}，{'value'：'26.91'}， {'value'：'26 .70'}，{'value'：'104.87'}，{'value'：'33 .41'}，{'value'： '80 .42'}，{'value'：'22.88'}，{'value'：'22.62'}，{'value'：'22.95'}， {'value'：'22 .62'}，{'value'：'23 .35'}，{'value'：'23 .76'}，{'value'： '23 .77'}]}，{'seriesname'：'Outside'，'data'：[{'value'：'None'}， {'value'：'None'}，{'value'：'None'}，{'value'：'None'}，{'value'： '29 .05'}，{'value'：'28.59'}，{'value'：'30.73'}，{'value'：'104.23'}， {'value'：'35.21'}，{'value'：'78.80'}，{'value'：'18.05'}，{'value'： '22 .24'}，{'value'：'19.99'}，{'value'：'22.15'}，{'value'：'23.29'}， {'value'：'23 .20'}，{'value'：'17 .81'}]}}}
其中存在一些“无”值，因为我的树莓派pi温度传感器一直在下降，但是每个图表中都有足够的数据来生成某种图。很高的温度是由默认的传感器错误读数120 C（当DS18b20传感器跌落但pi没有跌落）引起的，该读数使某些日常平均温度升高。
查看呈现的网页，在
中创建图表<span style><svg><div style></span>
模式，但对于chart2和chart3，缺少svg元素。
这是渲染页面的编辑摘录
<main>
<p>This page shows how the temperatures around the house have moved today.</p>
<h1>Temperature Movements Today</h1>
<div id="chart-1"><span id="ex1" class="fusioncharts-container" style="position: relative; text-align: left; line-height: normal; display: inline-block; zoom: 1; vertical-align: middle; font-weight: normal; font-variant: normal; font-style: normal; text-decoration: none; padding: 0px; margin: 0px; border: none; direction: ltr; width: 600px; height: 450px;"><svg height="450" version="1.1" width="600" xmlns="http://www.w3.org/2000/svg" style=#EDITED#</svg><div style="position: absolute; z-index: 50; top: 0px; right: auto; left: auto; overflow: hidden; background: rgb(255, 255, 255); border: 1px solid rgb(100, 100, 100); box-shadow: rgb(153, 153, 153) 2px 2px 5px; padding: 5px 3px; display: none;"></div></span></div>
<h1>28 Day Average Daytime Temperature</h1>
<p>This chart shows the daily average daytime (7am - 7pm) external and bedroom temperatures for the last 28 days.</p>
<div id="chart-2"><span id="ex2" class="fusioncharts-container" style="position: relative; text-align: left; line-height: normal; display: inline-block; zoom: 1; vertical-align: middle; font-weight: normal; font-variant: normal; font-style: normal; text-decoration: none; padding: 0px; margin: 0px; border: none; direction: ltr; width: 600px; height: 450px;"><div style="position: absolute; z-index: 50; top: 0px; right: auto; left: auto; overflow: hidden; background: rgb(255, 255, 255); border: 1px solid rgb(100, 100, 100); box-shadow: rgb(153, 153, 153) 2px 2px 5px; padding: 5px 3px; display: none;"></div></span></div>
<h1>28 Day Average Nighttime Temperature</h1>
<p>This chart shows the daily average nighttime (7pm - 7am) external and bedroom temperatures for the last 28 days.</p>
<div id="chart-3"><span id="ex3" class="fusioncharts-container" style="position: relative; text-align: left; line-height: normal; display: inline-block; zoom: 1; vertical-align: middle; font-weight: normal; font-variant: normal; font-style: normal; text-decoration: none; padding: 0px; margin: 0px; border: none; direction: ltr; width: 600px; height: 450px;"><div style="position: absolute; z-index: 50; top: 0px; right: auto; left: auto; overflow: hidden; background: rgb(255, 255, 255); border: 1px solid rgb(100, 100, 100); box-shadow: rgb(153, 153, 153) 2px 2px 5px; padding: 5px 3px; display: none;"></div></span></div>
</main>