Highcharts 绘图配置 的函数及参数

参考文章：

　　官方文档

　　图表highcharts联合jquery ajax 后端取数据前端图表渲染

　　highcharts图表插件初探

模版操作页面先定义一个div标签，指定id，把这个div标签当作一个容器用于绘图！

- 全局配置
                Highcharts.setOptions({
                    global: {
                        useUTC: false
                    }
                });

            - 主配置
                var chart = new Highcharts.Chart('id1', {
                title: {
                    text: '不同城市的月平均气温',
                    x: 0
                },
                subtitle: {
                    text: '数据来源: WorldClimate.com',
                    x: 0
                },
                chart: {
                    events: {
                        load: function (e) {
                            // 图标加载时，执行的函数
                        }
                    }
                },
                credits: {
                    enable: true,
                    position: {
                        align: 'right',
                        verticalAlign: 'bottom'
                    },
                    text: '老男孩',
                    href: 'http://www.oldboyedu.com'
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle',
                    borderWidth: 1
                },

                xAxis: {
                    // categories: ['1.1', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                    type: 'datetime',
                    labels: {
                        formatter: function () {
                            return Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.value);
                        },
                        rotation: 30
                    }

                },
                yAxis: {
                    title: {
                        text: '数值'
                    }
                },
                tooltip: {
                    valueSuffix: '个',
                    xDateFormat: "%Y-%m-%d %H:%M:%S",
                    pointFormatter: function (e) {
                        var tpl = '<span style="color:' + this.series.color + '">●</span> ' + this.series.name + ': <b>' + this.y + '</b><br/>';
                        return tpl;
                    },
                    valueDecimals: 1,
                    useHTML: true
                },
                plotOptions: {
                    series: {
                        cursor: 'pointer',
                        events: {
                            click: function (event) {
                                // 点击某个指定点时，执行的事件
                                console.log(this.name, event.point.x, event.point.y);
                            }
                        }
                    }
                },
                series: [{
                    name: '东京',
                    // data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
                    data: [
                        [1501689804077.358, 8.0],
                        [1501689814177.358, 6.9],
                        [1501689824277.358, 16.9],
                        [1501689834377.358, 11.9]
                    ]
                },
                    {
                        name: '洛杉矶',
                        // data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
                        data: [
                            [1501689804077.358, 18.0],
                            [1501689814177.358, 16.9],
                            [1501689824277.358, 26.9],
                            [1501689834377.358, 9.9]
                        ]
                    }]
            });

            // chart.addSeries({name:'北京',data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5]});
            // 参数：数值；是否重绘; isShift; 是否动画
            // chart.series[0].addPoint(18);
            // chart.series[0].addPoint([12]);
            // chart.series[0].addPoint([v.x, v.y]);
            // 参数：是否重绘
            // chart.series[0].remove(false);
            // 更新饼图
            // $('#id1').highcharts().series[0].data[0].update({x: 0, y: 100})

绘图示例：

def report(request):
    if request.permission_code  == "LOOK":
        if request.method == 'GET':
            return render(request,'report.html')
        else:
            from django.db.models import Count
            # 饼图
            result = models.Order.objects.filter(status=3).values_list('processor__nickname').annotate(ct=Count('id'))#获取的数据是元组类型，JSON序列化之后全部转成元组
            #status=3代表处理的是完成的数据,确保nickname是唯一的
            # 分组：select * from xx group by processor_id,ptime(2017-11-11)
            # 折线图 根据时间分组
            ymd_list = models.Order.objects.filter(status=3).extra(select={'ymd':"strftime('%%s',strftime('%%Y-%%m-%%d',ptime))"}).values('processor_id','processor__nickname','ymd').annotate(ct=Count('id'))
            ymd_dict = {}#前端折线图data是一个大字典，把每人做的整合在一起
            for row in ymd_list:
                key = row['processor_id']
                if key in ymd_dict:
                    ymd_dict[key]['data'].append([float(row['ymd'])*1000, row['ct']])
                else:
                    ymd_dict[key] = {'name':row['processor__nickname'],'data':[[float(row['ymd'])*1000, row['ct']],]}
            response = {
                'pie':result,
                #'pie': [['方少伟', 45.0],['吴永强',   40.0],['友情并',3],['尹树林',90]],
                'zhexian': list(ymd_dict.values())
            }
            return HttpResponse(json.dumps(response))

视图函数