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 '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'总量: ' + 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)})注意在发送的时候需要通过json.dumps()方法将数据集格式化一下，否则会有一些问题，图表无法正常显示，当然先要引入json这个模块：
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 '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'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}}通过safe这种过滤方式就可以正确地将数据传递给series，于是Highcharts图表就可以正确显示了，当需要修改数据的时候只要在后端views.py中封装即可。