后端使用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),

View Code

所有实例浏览器访问的后端方法：charts

@csrf_exempt
def charts(request):return render_to_response('html/chart.html')

View Code

所有实例使用的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-width:400px;height:400px"></div>
<script> </script>
</body>
</html>

View Code

1.实时刷新曲线图（若取消实时刷新，将activechart.js中 chart的events删除即可）：

js代码: activechart.js

$(document).ready(function () {Highcharts.setOptions({decimalPoint: '.',    // 小数点号，例如 12.50thousandsSep: ',',     // 千分号，例如 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,width: 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();
});

View Code

后端方法:

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}))

View Code

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}))

View Code

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.timedatay = result.data.valuestart(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,width: 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();

View Code

后端方法：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}))

View Code

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,width: 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();

View Code

后端方法：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}))

View Code

转载于:https://www.cnblogs.com/276815076/p/5945076.html

highcharts 使用实例相关推荐

  1. Highcharts 配置语法；Highcharts 配置选项详细说明

    Highcharts 配置语法 本章节我们将为大家介绍使用 Highcharts 生成图表的一些配置. 第一步:创建 HTML 页面 创建一个 HTML 页面,引入 jQuery 和 Highchar ...

  2. 前端开发基础知识汇总

    一.HTML 1.前言与常用标签 浏览器 内核 备注 IE Trident IE.猎豹安全.360极速浏览器.百度浏览器 firefox Gecko 可惜这几年已经没落了,打开速度慢.升级频繁.猪一样 ...

  3. Spring Cloud微服务系统架构的一些简单介绍和使用

    Spring Cloud 目录 特征 云原生应用程序 Spring Cloud上下文:应用程序上下文服务 引导应用程序上下文 应用程序上下文层次结构 改变Bootstrap的位置Properties ...

  4. highcharts与highstock实例

    <html> <head><title>highcharts报表示例</title><meta http-equiv="Content- ...

  5. Highcharts双饼图使用实例

    这次实践了Highcharts的双饼图,确实比普通饼图复杂多了,关键相关数据 多不能继续用简单基本数据类型Map,list了,单独建了个VO存放要用到的数据,不多说,贴代码! JS: /**查看机器占 ...

  6. Highcharts+Spring饼图使用实例

    项目上要用到Hightcharts展示平台机器占用情况,使用这类第三方插件很方便就能实现 JSP: <script type="text/javascript" src=&q ...

  7. 转： HighCharts 详细使用及API文档说明

    一.HighCharts开发说明: HighCharts开发实际上配置HighCharts每个部分,比如配置标题(title),副标题(subtitle)等,其中每个部分又有更细的参数配置,比如标题下 ...

  8. Highmaps网页图表教程之Highmaps第一个实例与图表构成

    Highmaps网页图表教程之Highmaps第一个实例与图表构成 Highmaps第一个实例 下面我们来实现本教程的第一个Highmaps实例. [实例1-1:hellomap]下面来制作一个中国地 ...

  9. ​网页图表Highcharts实践教程之标签组与载入动画

    ​网页图表Highcharts实践教程之标签组与载入动画 Highcharts标签组 在图表的大部分元素都提供了标签功能.但很多时候,我们需要额外说明一些信息.这个时候借助原有的图表元素的标签功能就不 ...

  10. ​网页图表Highcharts实践教程标之添加题副标题版权信息

    ​网页图表Highcharts实践教程标之添加题副标题版权信息 Highcharts辅助元素 辅助元素图表的非必要元素,如标题.版权信息.标签.载入动态.它们不和图表数据发生关联,只是额外说明一些基本 ...

最新文章

  1. javascript --- 原生的拖拽功能实现
  2. java超出gc开销限制_超出了GC开销限制– Java堆分析
  3. facade 门面 php,php设计模式之门面（Facade）模式
  4. 2016美国计算机科学硕士,美国计算机科学硕士MS in Computer Science TOP10学校录取要求提醒...
  5. Android 8.0 学习（23）---recovery 流程分析
  6. 重定义 UIImagePickerController
  7. Android “Theme.AppCompat.Light”解决方法
  8. 关于EXCEL操作的问题
  9. 对我有利就契约，不利就废纸
  10. 群晖7.X关闭双重验证（OTP）的方法
  11. android app开机启动画面,Android-如何设置APP开机启动(图文)
  12. 第 2 课：KNX智能控制系统的接口 BCU 模块
  13. JS鼠标移入移出事件：onmouseover事件和onmouseout事件实例
  14. 公司内网openvpn部署，
  15. YOLOv7改进主干系列：首发结合最新 QARepVGG 升级Rep结构， 本文对其进行原创改进 QARepNeXt 结构，基于美团提出一种量化感知方法：再一次让 RepVGG 变得更好
  16. MySQL——创建存储过程和函数
  17. Linux虚拟网络基础——veth pair
  18. 稀疏表示和字典学习的简单理解
  19. 35岁失业了，我该何去何从怎么选择？
  20. 专题分纲目录 思维模型

热门文章

  1. python人脸比对算法_Python的人脸识别,欧式距离比对,机器训练,人脸采集,离线识别...
  2. 【转】数据结构图文解析之：二叉堆详解及C++模板实现
  3. openstack热添加磁盘
  4. LA 4794 状态DP+子集枚举
  5. EasyUI-增删改操作
  6. Chinese_PRC
  7. 统计数据库表中记录数
  8. Visual C++ 6.0 简体中文企业版
  9. 服务器端 viewstate
  10. Make WAR file 1.0