highcharts 使用实例
后端使用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-width: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,
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();
});
后端方法:
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,
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();
后端方法：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,
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();
后端方法：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}))
highcharts 使用实例的更多相关文章
- highCharts参数实例解释
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 【HighCharts系列教程】一、认识Highcharts
一.什么是HighCharts HighCharts是网页报表工具,开发语言是Javascript HighCharts是一个简单易用.美观.跨平台.跨浏览器的图表工具 HighCharts支持图表的 ...
- Highcharts 配置语法
Highcharts 配置语法 本章节我们将为大家介绍使用 Highcharts 生成图表的一些配置. 第一步:创建 HTML 页面 创建一个 HTML 页面,引入 jQuery 和 Highchar ...
- Highcharts 配置语法；Highcharts 配置选项详细说明
Highcharts 配置语法 本章节我们将为大家介绍使用 Highcharts 生成图表的一些配置. 第一步:创建 HTML 页面 创建一个 HTML 页面,引入 jQuery 和 Highchar ...
- 最近学习工作流 推荐一个activiti 的教程文档
全文地址:http://www.mossle.com/docs/activiti/ Activiti 5.15 用户手册 Table of Contents 1. 简介 协议 下载 源码 必要的软件 ...
- highcharts与highstock实例
highcharts实例代码 <head> <title>highcharts报表示例</title> <meta http-equiv="Cont ...
- highCharts图表入门实例
本文通过讲解Highcharts生成一个简单的3D柱状图实例来学习Highcharts的使用. JSP 页面 1.需要引入的js文件 <script src="<%=basePa ...
- highcharts实例教程二：结合php与mysql生成饼图
上回我们分析了用highcharts结合php和mysql生成折线图的实例,这次我们以技术cto网站搜索引擎流量为例利用highcharts生成饼图. 饼图通常用在我们需要直观地显示各个部分所占的比例 ...
- 使用highcharts实现无其他信息纯趋势图实战实例
使用highcharts实现无其他信息纯趋势图实战实例 Highcharts去掉或者隐藏掉y轴的刻度线yAxis : { gridLineWidth: 0, labels:{ //enabled:fa ...
随机推荐
- 也谈Oracle异常： ORA-06502: PL/SQL: 数字或值错误 : 字符串缓冲区太小
场景: .Net程序调用Oracle方法 command.ExecuteNonQuery()执行存储过程;弹出如标题异常信息. 存储过程有4个输入参数,一个输出参数.一旦执行到给输出参数赋值的时候就报 ...
- Java中Enum类型的序列化（转）
在Java中,对Enum类型的序列化与其他对象类型的序列化有所不同,今天就来看看到底有什么不同.下面先来看下在Java中,我们定义的Enum在被编译之后是长成什么样子的. Java代码: Java代码 ...
- Chap2: question: 1 - 10
1. 赋值运算符函数(或应说复制拷贝函数问题) class A { private: int value; public: A(int n) : value(n) {} A(A O) { value ...
- 转 C# 给某个方法设定执行超时时间
在某些情况下(例如通过网络访问数据),常常不希望程序卡住而占用太多时间以至于造成界面假死. 在这时.我们可以通过Thread.Thread + Invoke(UI)或者是 delegate.Begin ...
- win32手动创建windows窗口的，小记
摘抄自文档,其中的函数需要以后花时间看 向 WinMain 添加功能 首先,在 WinMain 函数内部创建 WNDCLASSEX 类型的窗口类结构. 此结构包含有关窗口的信息,如应用程序图标.窗口的 ...
- js实现右侧的分享效果
就是当鼠标移到上面的时候,他会出现,鼠标移出就消失. nmouseover和nmouseout就能实现 <style> *{padding:0;margin:0;} #s1{width:2 ...
- c语言 sscanf()函数
sscanf()函数用于从字符串中读取指定格式的数据,其原型如下: int sscanf (char *str, char * format [, argument, ...]); [参数]参数 ...
- AngularJS图片上传功能的实现
一.前言 前一段时间做项目时,遇到一个问题就是AngularJS实现图片预览和上传的功能,当时查阅文档(都是英文文档)折腾了很久才弄出来,现将整个流程整理出来,有需要的朋友可以参考一下,如果您有更好的 ...
- 【Tree 1】树形结构数据呈现的递归算法实现
一.基本概况 在我的项目中,常常会用到树形结构的数据,最为明显的就是左边菜单栏,类似于window folder一样的东西. 而我之前一直是借助前端封装好的ZTree等工具实现展示,而后台则通常使用递 ...
- Android开发--微信布局（ListView）基本运用
ListView 1．ListVeiw 用来展示列表的View. 2．适配器 用来把数据映射到ListView上的中介. 3．数据 具体的将被映射的字符串,图片,或者基本组件. 根据列表的适配器 ...