Highcharts 绘图配置 的函数及参数
参考文章：
图表highcharts联合jquery ajax 后端取数据前端图表渲染
模版操作页面先定义一个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))
//用于绘图的两个标签 <div id="container" style="min-width:300px;height:300px"></div> <div id="container2" style="min-width:500px;height:500px"></div> //JS处理 //绘图所需要的插件 <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script> <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script> <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script> <script> //页面加载完成，执行Highcharts方法 $(function () { Highcharts.setOptions({ global: { useUTC: false } }); //从数据库中获取数据，作为绘图所需的数据，执行成功开始画图 $.ajax({ url: '/report.html', type: "POST", data: {'csrfmiddlewaretoken': '{{ csrf_token }}'}, dataType: 'JSON', success: function (arg) { console.log(arg); //在指定的标签利用highcharts对象生成表图 $('#container').highcharts({ chart: { plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false }, //图的标题 title: { text: '运维人员处理报障占比' }, // tooltip: { headerFormat: '{series.name}<br>', pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>' }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, format: '<b>{point.name}</b>: {point.percentage:.1f} %', style: { color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' } } } }, //绘图参数 series: [{ type: 'pie', //报表图的类型 name: '运维人员处理报障占比',//图右侧下标 data: arg.pie //数据（可以手写，也可以是获取到的数据） }] }); //绘制折线图 如果是要显示时间数据，Highharts只可以操作时间戳 Highcharts.chart('container2', { title: { text: '每日处理订单详细', x: -20 //center }, //子标题 subtitle: { text: '...', x: -20 }, //折线标识图例位置 legend: { layout: 'horizontal', //垂直或水平 align: 'center',//左中右位置 verticalAlign: 'bottom', //上中下位置 borderWidth: 1 //边框 }, //折线图x轴 xAxis:{ //时间格式化 type:'datetime', labels:{ //函数 formatter:function(){ return Highcharts.dateFormat("%Y-%m-%d",this.value); //return this.value; } }, //minTickInterval:24 }, //单位 tooltip: { valueSuffix: '个'} //数据 series: arg.zhexian //数据中的data类型可以是一个列表（代表单轴），也可以是列表内套多个列表，列表内多值（代表不同轴的数据） //一个字典代表着一条折线，所以可以存在多条折线（及多个字典） series: [ {name:"xxx", //data:[1,2,3,4,5,6,7], data:[[10，10],[20，10],[30，10],[40，10],[50，10],[60，10],[70，10]],}, {name:"xxx", //data:[1,2,3,4,5,6,7], data:[[10，20],[20，20],[30，20],[40，20],[50，20],[60，20],[70，20]],}, ] }); } }); }) </script>
url(r'^report.html$', views.report),
