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"
最低0.47元/天 解锁文章
3979
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
