Django向Highcharts图表发送数据并用模板语言实现动态显示
今天遇到一个问题，就是需要动态修改Highcharts图表的数据，仔细观察Highcharts的js代码，比如堆叠柱状图：
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: '堆叠柱形图'
},
xAxis: {
categories: ['苹果', '橘子', '梨', '葡萄', '香蕉']
},
yAxis: {
min: 0,
title: {
text: '水果消费总量'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function () {
return '' + this.x + '
' +
this.series.name + ': ' + this.y + '
' +
'总量: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}
}
},
series: [{
name: '小张',
data: [5, 3, 4, 7, 2]
}, {
name: '小彭',
data: [2, 2, 3, 2, 1]
}, {
name: '小潘',
data: [3, 4, 4, 2, 5]
}]
});
});
发现图表所用的数据就来自js代码中的series，并且很显然series就是一个json格式的数据，于是我们的思路就可以是通过views.py里的方法通过request方式向当前页面发送json数据填充进series部分即可。
1、数据准备
观察得知，这个json数据最外层是一个列表，然后列表中的每个元素是一个字典，而字典中包含两个元素，分别是name与对应的值和data与对应的值，于是在views.py中的代码按照这样的格式封装成json即可，我的代码如下：
highdata = []
highdata.append({'name': one.username, 'data': [int(graph.b1), int(graph.b2), int(graph.b3), int(graph.b4), int(graph.b5), int(graph.b6), int(graph.b7)]})highdata就是我准备用来传送数据的列表，然后遍历从数据库中取出的数据集，将数据按照name对应value和data对应value的格式封装成字典，同时将字典append进highdata中，这样数据集就准备好了，下一步是发送到前端页面中。
2、将数据发送至页面中
这一步通过request方式将封装好的数据发送至页面，代码如下：
return render(request, 'admin/index_admin.html', {'series': json.dumps(highdata)})import json剩下的就是在页面中正确显示即可。
3、数据展示
代码如下：
$(function () {
var chart = new Highcharts.Chart('highcharts', {
chart: {
type: 'column'
},
title: {
text: ''
},
xAxis: {
categories: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL']
},
yAxis: {
min: 0,
title: {
text: 'Fixed Bugs'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function () {
return '' + this.x + '
' +
this.series.name + ': ' + this.y + '
' +
'ALL: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}
}
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
series:{{series|safe}}
});
});我已经对Highcharts的js代码进行了针对我项目的修改，注意看series部分，是这样写的：
series:{{series|safe}}