JavaScript- 图表库Highcharts
JavaScript- 图表库Highcharts
2015年10月13日
1 目标：前端统计图表
能够完成饼图、柱状图等统计图表，并能够交互。
能够将结果导出为图片或PDF等。
能够适应手机等移动端。
2 原理：纯javascript的jQuery插件。
3 流程：安装库，构造容器，配置图表属性。
安装库：从官网下载库的zip文件，解压后将highcharts.js复制到工程目录。
构造容器：在html中创建一个div，设置其样式和id。
配置图表属性：设置图表类型、标题、XY轴标题、数据、版权信息等。
示例：
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<script type="text/javascript" src="easyui/jquery-easyui-1.4.3/jquery.min.js"></script>
<script type="text/javascript"src="js/highcharts.js"></script>
<title>This is a testpage for easyUI</title>
</head>
<body>
<divid="container"style="width:600px;height:400px"></div>
<script type="text/javascript">
$(function(){
$('#container').highcharts({
chart:{type:'column'},
title:{text:"thisis column chart"},
xAxis:{title:{text:"x1Title"},categories:['a1','b2','c3']},
yAxis:{title:{text:"yTitle"}},
series:[
{name:'N1',data:[1,0.5,4]},
{name:'N2',data:[2,3,5]}
],
credits:{
enabled:false // 禁用版权信息
}
});
})
</script>
</body>
</html>
4 方法：
参考：http://www.hcharts.cn/docs/index.php?doc=index
http://www.hcharts.cn/api/index.php
4.1 组织结构：数据Series和其它属性
图表类型：chart。默认是折线（line）。
标题：Title，SubTitle。
数据：Series，表示所有的数据行数组。
坐标轴：xAxis,yAxis。支持多轴。
版权信息：Credits。
图例：Legend。
导出：Exporting。
提示框：Tooltip。
辅助标识：标识线PlotLines，标识区域PlotBands。
4.2 图表类型：Chart
4.2.1目标：设置图表的类型和通用参数。
4.2.2方法：图表类型type，背景色backgroundColor，动画animation，缩放zoomType等。
参考：
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/3d-column-interactive/
4.2.2.1 缩放zoomType:可以指定鼠标进行画框缩放。
chart:{type:"column",zoomType:'xy'},
4.2.2.2 3d效果：options3d。
注意：需要higcharts-3d.js库。
x轴旋转角度（向外）：alpha。
y轴旋转角度（向外）：beta。
z轴深度（景深比：chart与景深的比值）：depth。默认最近100，1最深。
视距（chart与视距比值）：viewDistance。默认最近100。1最远。
示例：景深1，视距1。
chart:{type:"column",zoomType:'xy',options3d:{
enabled:true,
alpha:0,
beta:0,
depth:1,
viewDistance:1
}},
4.3 标题：title,subtitle
目标：设置标题的内容，样式等，可以使用html格式的内容。
方法：设置内容text，useHTML。
示例：添加HTML标题。
title:{useHTML:true,text:"thisis column chart<a href='http://www.baidu.com'>baidu</a>"},
subtitle:{useHTML:true,text:"sub=<ahref='http://www.baidu.com'>baidu</a>"},
4.4 坐标轴：支持多轴，可以设置各种参数。
在x坐标轴中设置数据列：categories。数据中的数据顺序由此确定。
设置多个y坐标轴：y轴如果有多个，数据中可以指定y轴的序号（从0开始）。
示例：双Y坐标轴
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<script type="text/javascript"
src="easyui/jquery-easyui-1.4.3/jquery.min.js"></script>
<scripttype="text/javascript"src="js/highcharts.js"></script>
<title>This is a testpage for easyUI</title>
</head>
<body>
<div id="container"style="width:600px;height:400px"></div>
<script type="text/javascript">
$(function(){
$('#container').highcharts({
chart:{type:"column",zoomType:'xy'},
title:{useHTML:true,text:"this is columnchart<a href='http://www.baidu.com'>baidu</a>"},
subtitle:{useHTML:true,text:"sub=<a href='http://www.baidu.com'>baidu</a>"},
xAxis:{title:{text:"x1Title"},categories:['a1','b2','c3']},
yAxis:[{title:{text:"y Title"}},{title:{text:"y2Title"},opposite:true}],
series:[
{yAxis:0,name:'N1',data:[1,0.5,4]},
{yAxis:0,name:'N2',data:[2,3,5]},
{yAxis:1,name:'Y2',data:[6,7,8]}
],
credits:{
enabled:false // 禁用版权信息
}
});
})
</script>
</body>
</html>
4.5 数据：Series
4.5.1目标：设置数据内容和样式。
4.5.2方法：设置数据内容data,样式type等。
4.5.2.1 设置数据内容data:如果使用点对作为数据，则为【x,y】形式。
4.5.2.2 设置数据的样式：可以指定不同的类型，同图表类型。
4.5.2.3 设置数据标签dataLabels:直接使用format和｛x｝,{y}设置或设置自定义函数formatter。
4.5.2.4 设置显示样式：鼠标样式，线条样式，分类样式Zones等。
4.5.2.5 设置颜色：在data中使用color指定颜色或都使用colorByPoint将每个点设置一个颜色。
4.5.2.6 设置数据提示框tooltip:自定义样式，前后缀等。
4.5.3示例
4.5.3.1 示例：设置数据列的显示颜色
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<scripttype="text/javascript" src="easyui/jquery-easyui-1.4.3/jquery.min.js"></script>
<scripttype="text/javascript"src="js/highcharts.js"></script>
<title>This is a testpage for easyUI</title>
</head>
<body>
<div id="container" style="width:600px;height:400px"></div>
<script type="text/javascript">
$(function(){
$('#container').highcharts({
chart:{type:"column",zoomType:'xy'},
title:{useHTML:true,text:"this is columnchart<a href='http://www.baidu.com'>baidu</a>"},
subtitle:{useHTML:true,text:"sub=<ahref='http://www.baidu.com'>baidu</a>"},
xAxis:{title:{text:"x1Title"},categories:['a1','b2','c3']},
yAxis:[{title:{text:"yTitle"}},{title:{text:"y2 Title"},opposite:true}],
series:[
{yAxis:0,name:'N1',data:[1,0.5,4]},
{yAxis:0,name:'N2',data:[2,3,5],colorByPoint:true},
{yAxis:1,name:'Y2',data:[6,7,8],color:"#ff0000"},
{type:'spline',yAxis:1,name:'point',colorByPoint:true,
data:[[0,6],[1,7],[5,8]],
dataLabels:{
enabled:true,
// format:'{x}={y} kg'}
formatter:function(){
returnthis.x+" / "+this.y+"ml";
}}
}
],
credits:{
enabled:false // 禁用版权信息
}
});
})
</script>
</body>
</html>
4.5.3.2 示例：带有标签的数据图表。
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<scripttype="text/javascript" src="easyui/jquery-easyui-1.4.3/jquery.min.js"></script>
<scripttype="text/javascript"src="js/highcharts.js"></script>
<title>This is a testpage for easyUI</title>
</head>
<body>
<div id="container"style="width:600px;height:400px"></div>
<script type="text/javascript">
$(function(){
$('#container').highcharts({
chart:{type:"column",zoomType:'xy'},
title:{useHTML:true,text:"this is columnchart<a href='http://www.baidu.com'>baidu</a>"},
subtitle:{useHTML:true,text:"sub=<ahref='http://www.baidu.com'>baidu</a>"},
xAxis:{title:{text:"x1Title"},categories:['a1','b2','c3']},
yAxis:[{title:{text:"y Title"}},{title:{text:"y2Title"},opposite:true}],
series:[
{yAxis:0,name:'N1',data:[1,0.5,4]},
{yAxis:0,name:'N2',data:[2,3,5]},
{yAxis:1,name:'Y2',data:[6,7,8]},
{type:'spline',yAxis:1,name:'point',
data:[[0,6],[1,7],[5,8]],
dataLabels:{
enabled:true,
// format:'{x}={y}kg'}
formatter:function(){
returnthis.x+" / "+this.y+"ml";
}}
}
],
credits:{
enabled:false // 禁用版权信息
}
});
})
</script>
</body>
</html>
4.5.3.3 示例：指定坐标点，多样式图表。
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<scripttype="text/javascript" src="easyui/jquery-easyui-1.4.3/jquery.min.js"></script>
<scripttype="text/javascript" src="js/highcharts.js"></script>
<title>This is a testpage for easyUI</title>
</head>
<body>
<div id="container"style="width:600px;height:400px"></div>
<script type="text/javascript">
$(function(){
$('#container').highcharts({
chart:{type:"column",zoomType:'xy'},
title:{useHTML:true,text:"this is columnchart<a href='http://www.baidu.com'>baidu</a>"},
subtitle:{useHTML:true,text:"sub=<ahref='http://www.baidu.com'>baidu</a>"},
xAxis:{title:{text:"x1Title"},categories:['a1','b2','c3']},
yAxis:[{title:{text:"yTitle"}},{title:{text:"y2 Title"},opposite:true}],
series:[
{yAxis:0,name:'N1',data:[1,0.5,4]},
{yAxis:0,name:'N2',data:[2,3,5]},
{yAxis:1,name:'Y2',data:[6,7,8]},
{type:'spline',yAxis:1,name:'point',data:[[0,6],[1,7],[5,8]]}
],
credits:{
enabled:false // 禁用版权信息
}
});
})
</script>
</body>
</html>
4.5.3.4 示例：设置数据提示框的样式，模拟默认样式
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<scripttype="text/javascript" src="easyui/jquery-easyui-1.4.3/jquery.min.js"></script>
<scripttype="text/javascript"src="js/highcharts.js"></script>
<title>This is a testpage for easyUI</title>
</head>
<body>
<div id="container"style="width:600px;height:400px"></div>
<script type="text/javascript">
$(function(){
$('#container').highcharts({
chart:{type:"column",zoomType:'xy'},
title:{useHTML:true,text:"this is columnchart<a href='http://www.baidu.com'>baidu</a>"},
subtitle:{useHTML:true,text:"sub=<ahref='http://www.baidu.com'>baidu</a>"},
xAxis:{title:{text:"x1Title"},categories:['a1','b2','c3']},
yAxis:[{title:{text:"yTitle"}},{title:{text:"y2 Title"},opposite:true}],
series:[
{yAxis:0,name:'N1',data:[1,0.5,4]},
{yAxis:0,name:'N2',data:[2,3,5],colorByPoint:true},
{yAxis:1,name:'Y2',data:[6,7,8],color:"#ff0000"},
{type:'spline',yAxis:1,name:'point',colorByPoint:true,
data:[[0,6],[1,7],[5,8]],
dataLabels:{
enabled:true,
// format:'{x}={y} kg'}
formatter:function(){
returnthis.x+" / "+this.y+"ml";
}},
tooltip:{
valueSuffix:'>ww',
useHTML:true,
headerFormat:'Header<span style="color:{point.color}">\u25CF</span><br/>',
pointFormat:'point={point.x},{point.y}<br/>',
footerFormat:'footer'
}
}
],
credits:{
enabled:false // 禁用版权信息
}
});
})
</script>
</body>
</html>
4.6 任意标签：Label
可以在任意位置设置标签。
5 示例
5.1 3d柱状图,动态加载数据
//easyUITest.html <!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<scripttype="text/javascript"
src="easyui/jquery-easyui-1.4.3/jquery.min.js"></script>
<scripttype="text/javascript"src="js/highcharts.js"></script>
<scripttype="text/javascript"src="js/highcharts-3d.js"></script>
<title>This is a testpage for easyUI</title>
</head>
<body>
<div id="container" style="width: 600px;height: 400px"></div>
<script type="text/javascript">
$(function(){
$('#container').highcharts({
chart:{type:"column",zoomType:'xy',options3d:{enabled:true,depth:10}},
title:{useHTML:true,text:"this is columnchart<a href='http://www.baidu.com'>baidu</a>"},
subtitle:{useHTML:true,text:"sub=<ahref='http://www.baidu.com'>baidu</a>"},
xAxis:{title:{text:"x1Title"},categories:['a1','b2','c3']},
yAxis:{title:{text:"y Title"}},
credits:{
enabled:false // 禁用版权信息
}
});
//动态加载数据
varchart = $('#container').highcharts();
chart.addSeries({name:'N2',data:[1,0.5,4],colorByPoint:true});
});
</script>
</body>
</html>
5.2 3d饼图,动态加载数据
//easyUITest.html <!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<scripttype="text/javascript"
src="easyui/jquery-easyui-1.4.3/jquery.min.js"></script>
<script type="text/javascript"src="js/highcharts.js"></script>
<scripttype="text/javascript"src="js/highcharts-3d.js"></script>
<title>This is a testpage for easyUI</title>
</head>
<body>
<div id="container" style="width: 600px;height: 400px"></div>
<script type="text/javascript">
$(function() {
$('#container').highcharts({
chart : {
type :"pie",
options3d: {
enabled: true,
alpha: 45,
beta: 0
}
},
plotOptions : {
pie :{
allowPointSelect:true,
depth: 35,
dataLabels: {
enabled: true,
format:'<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
title : {
useHTML : true,
text : "this is column chart<ahref='http://www.baidu.com'>baidu</a>"
},
subtitle : {
useHTML : true,
text : "sub=<ahref='http://www.baidu.com'>baidu</a>"
},
credits : {
enabled : false
// 禁用版权信息
}
});
//动态加载数据
var chart = $('#container').highcharts();
chart.addSeries({
name : 'N2',
data : [ ['xx',1], {name:'yy',y:0.5}, ['zz',4] ]
});
});
</script>
</body>
</html>
5.3 折线图
//easyUITest.html <!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<!-- easyUI library -->
<linkrel="stylesheet" type="text/css"
href="easyui/jquery-easyui-1.4.3/themes/default/easyui.css"/>
<linkrel="stylesheet" type="text/css"
href="easyui/jquery-easyui-1.4.3/themes/icon.css"/>
<!-- add default icons.@author:[email protected]@date:2015-9-23 14:19 -->
<linkrel="stylesheet" type="text/css"
href="easyui/jquery-easyui-1.4.3/themes/color.css"/>
<scripttype="text/javascript"
src="easyui/jquery-easyui-1.4.3/jquery.min.js"></script>
<script type="text/javascript"
src="easyui/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
<scripttype="text/javascript"
src="easyui/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>
<title>This is a testpage for easyUI</title>
</head>
<body>
<div id="container" style="width: 600px;height: 400px"></div>
<script type="text/javascript">
$(function(){
$('#container').highcharts({
chart:{type:"line",zoomType:'xy'},
title:{useHTML:true,text:"this is columnchart<a href='http://www.baidu.com'>baidu</a>"},
subtitle:{useHTML:true,text:"sub=<ahref='http://www.baidu.com'>baidu</a>"},
xAxis:{title:{text:"x1Title"},categories:['a1','b2','c3']},
yAxis:[{title:{text:"yTitle"}},{title:{text:"y2 Title"},opposite:true}],
legend:{
layout: 'vertical',
align:'right',
verticalAlign: 'middle',
borderWidth: 0
},
series:[
{name:"全程",data:[3,5,8]},
{name:"行车",data:[4,3,6]},
{name:"怠速",data:[6,2,7]}
],
credits:{
enabled:false // 禁用版权信息
}
});
})
</script>
</body>
</html>