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中封装即可。