同一pag上有多个Django FusionCharts

Question

我试着和这篇文章中的一样，而且据我所知，我使用的方法与答案中的方法相同，但它不起作用。我也试着把图表放在一个表格里作为答案，但只得到了图表1。在

我也不能让chart2或chart3单独出现，也不能让chart1的多个副本出现。下面的代码给出了chart1，但是chart2和chart3有空格（保留了空间，但没有图表）。在

使用Django 2.0.4、python3.6.3、Django开发服务器内置的SQLite。在

如果有人能发现我做错了什么，我将非常感激。在

视图.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在

^{pr2}$

dataSource1对象是

{'chart': {'caption': 'Temperatures Today', 'subCaption': '2018-08-16', 'xAxisName': 'Hour', 'yAxisName': 'Temp C', 'theme': 'zune', 'showValues': '0', 'rotateLabels': '0', 'setAdaptiveYMin': '1'}, 'categories': [{'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'}]}], 'dataset': [{'seriesname': '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': 'Outside', 'data': [{'value': '18.67'}, {'value': '18.29'}, {'value': '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'}]}]}

数据源2是

{'chart': {'caption': 'Daytime Temps Last 28 Days', 'subCaption': '2018-07-19', 'xAxisName': 'Date', 'yAxisName': 'Temp C', 'theme': 'zune', 'showValues': '0', 'rotateLabels': '0', 'setAdaptiveYMin': '1'}, 'categories': [{'category': [20180719, 20180720, 20180724, 20180804, 20180805, 20180806, 20180807, 20180808, 20180809, 20180810, 20180811, 20180812, 20180813, 20180814, 20180815, 20180816]}], 'dataset': [{'seriesname': 'Hall', 'data': [{'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'}, {'value': 'None'}]}, {'seriesname': 'Master Bedroom', 'data': [{'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'}]}]}

这里有一些“无”值，因为我的树莓皮温度传感器不断下降，但每个图表中都有足够的数据来绘制某种图表。温度非常高是由默认的传感器错误读数120摄氏度引起的（当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>