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等。
参考:
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"