后端使用django实现，返回的数据可以修改为从数据库获取或其他方式获取，实例里是写死的数据。
urls配置：
url(r'^outip/chart/$', views.charts), url(r'^outip/getchart/$', views.get_chart), url(r'^outip/getlast/$', views.get_last), url(r'^outip/detail/$', views.get_detail_chart),
所有实例浏览器访问的后端方法：charts
@csrf_exempt def charts(request): return render_to_response('html/chart.html')
所有实例使用的html代码：chart.html
<html> <head> <meta charset="utf-8"> <style> </style> <script type="text/javascript" src="/outip/staticfiles/js/jquery-2.1.4.js"></script> <script type="text/javascript" src="/outip/staticfiles/highcharts/js/highcharts.js"></script> <script type="text/javascript" src="/outip/staticfiles/highcharts/js/modules/exporting.js"></script> <script type="text/javascript" src="/outip/staticfiles/js/activechart.js"></script> <!-- <script type="text/javascript" src="/outip/staticfiles/js/chart.js"></script> --> </head> <body> <div id="container" style="min-400px;height:400px"></div> <script> </script> </body> </html>
1.实时刷新曲线图（若取消实时刷新，将activechart.js中 chart的events删除即可）：
js代码: activechart.js
$(document).ready(function () { Highcharts.setOptions({ decimalPoint: '.', // 小数点号，例如 12.50 thousandsSep: ',', // 千分号，例如 12,000 global: { useUTC: false } }); function getchart() { var datax = []; var datay = []; $.ajax({ type: "POST", dataType: "json", url:'/outip/getchart/', success: function(result) { if (result.errno == 0) { for(var i=0;i<result.data.length;i++) { datax.push(result.data[i].x) datay.push(result.data[i].y) }; start(datax,datay); //console.log(datax); //console.log(t); }else { alert('err'); } } }); } function start(datax,datay) { $('#container').highcharts({ chart: { type: 'spline', animation: Highcharts.svg, marginRight: 10, events: { load: function () { var series = this.series[0]; setInterval(function () { $.ajax({ type: "POST", dataType: "json", url:'/outip/getlast/', success: function(result) { if (result.errno == 0) { series.addPoint([result.data.x, result.data.y], true, true); } else { alert('last err'); } } }); }, 60000); } } }, title: { text: 'Total flow', x: -20 //center }, //subtitle: { // text: 'Source:', // x: -20 //}, xAxis: { categories: datax //categories: ["2016-10-08 17:11"] }, yAxis: { title: { text: 'flow/Bytes' }, plotLines: [{ value: 0, 1, color: '#808080' }] }, credits:{ enabled:false // 禁用版权信息 }, tooltip: { valueSuffix: ' Bytes', formatter:function(){ //console.log(this); return this.key+'<br>'+Highcharts.numberFormat(this.y,'2','.',',')+' Bytes'; } }, legend: { layout: 'vertical', align: 'center', verticalAlign: 'bottom', borderWidth: 0 }, series: [{ name: 'Flow', data: datay }] }); } getchart(); });
后端方法:
1) 获取初始数据：get_chart
@csrf_exempt def get_chart(request): data = [{'x':'2016-10-08 17:11','y':1},{'x':'2016-10-08 17:12','y':3},{'x':'2016-10-08 17:13','y':4},{'x':'2016-10-08 17:14','y':400},{'x':'2016-10-08 17:15','y':124},{'x':'2016-10-08 17:16','y':2444},{'x':'2016-10-08 17:17','y':23334},{'x':'2016-10-08 17:18','y':40}] return HttpResponse(json.dumps({'errno':0,'data':data}))
2）获取最新的一个数据：get_last
@csrf_exempt def get_last(request): data = {'x':'2016-10-08 17:19','y':100} return HttpResponse(json.dumps({'errno':0,'data':data}))
2.基础柱状图
js代码：activechart.js（datay每个元素中要有name和data两个key,且名字不能改，data的值为一个数组；若将plotOptions.column.stacking属性加上，则成为堆叠柱状图）
function getchart() { var datax; var datay; $.ajax({ type: "POST", dataType: "json", url:'/outip/detail/', success: function(result) { if (result.errno == 0) { datax = result.data.time datay = result.data.value start(datax,datay); //console.log(datay); //console.log(t); }else { alert('err'); } } }); } function start(datax,datay) { $('#container').highcharts({ chart: { type: 'column' }, title: { text: 'Detail flow', x: -20 //center }, credits:{ enabled:false // 禁用版权信息 }, //subtitle: { // text: 'Source:', // x: -20 //}, xAxis: { categories: datax //categories: ["2016-10-08 17:11"] }, yAxis: { title: { text: 'flow/Bytes' }, plotLines: [{ value: 0, 1, color: '#808080' }] }, tooltip: { formatter: function () { return this.x + ' Total: ' + Highcharts.numberFormat(this.point.stackTotal,'2','.',',') + ' Bytes<br/><b>' + this.series.name + ': ' + Highcharts.numberFormat(this.y,'2','.',',') + ' Bytes</b>'; }, valueSuffix: ' Bytes' }, plotOptions: { column: { pointPadding: 0.2, borderWidth: 0, //stacking: 'normal', dataLabels: { enabled: true, color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'black', style: { textShadow: '0 0 3px black' } } } }, /*legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0 },*/ //series: [{'name':'1','data':[1]},{'name':'2','data':[3]}] /*[{ series: datay /*[{ name: 'Flow', data: datay }]*/ }); } getchart();
后端方法：get_detail_chart
@csrf_exempt def get_detail_chart(request): data = {'time':['2016-10-08 17:19'],'value':[{'name':'x0','data':[70]},{'name':'x1','data':[60]},{'name':'x2','data':[21]},{'name':'x3','data':[31]},{'name':'x4','data':[50]},{'name':'x5','data':[40]},{'name':'x6','data':[22]},{'name':'x7','data':[1]},{'name':'x8','data':[20]},{'name':'x9','data':[10]},{'name':'x10','data':[30]}]} return HttpResponse(json.dumps({'errno':0,'data':data}))
3.堆叠柱状图
js代码：activechart.js
function getchart() { var datax; var datay; $.ajax({ type: "POST", dataType: "json", url:'/outip/getchart/', success: function(result) { if (result.errno == 0) { for(var i=0;i<result.data.length;i++) { datax = result.data[i].time; datay = result.data[i].value; }; start(datax,datay); //console.log(datax); //console.log(t); }else { alert('err'); } } }); } function start(datax,datay) { $('#container').highcharts({ chart: { type: 'column' }, title: { text: 'Total flow', x: -20 //center }, //subtitle: { // text: 'Source:', // x: -20 //}, xAxis: { categories: datax //categories: ["2016-10-08 17:11"] }, yAxis: { title: { text: 'flow/Bytes' }, plotLines: [{ value: 0, 1, color: '#808080' }] }, tooltip: { valueSuffix: ' Bytes' }, plotOptions: { column: { stacking: 'normal', dataLabels: { enabled: true, color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white', style: { textShadow: '0 0 3px black' } } } }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0 }, //series: [{'name':'1','data':[1]},{'name':'2','data':[3]}] /*[{ series: datay /*[{ name: 'Flow', data: datay }]*/ }); } getchart();
后端方法：get_chart
@csrf_exempt def get_chart(request): data = [{'time':['2016-10-08 17:11','2016-10-08 17:12'],'value':[{'name':'f1','data':[1,3]},{'name':'f2','data':[3,1]}]}] return HttpResponse(json.dumps({'errno':0,'data':data}))