使用Highcharts快速开发报表文档格式.docx
《使用Highcharts快速开发报表文档格式.docx》由会员分享，可在线阅读，更多相关《使用Highcharts快速开发报表文档格式.docx（24页珍藏版）》请在冰豆网上搜索。
,
defaultSeriesType:
column'
},
title:
text:
FruitConsumption'
xAxis:
categories:
[]
yAxis:
Units'
}
series:
};
6.动态
在图表创建后，能调用API改变图表的展现
7.支持多轴对比
尝试修复量和成功修复量对应左边的Y轴，而修复成功率则对应右边的Y轴
8.提示标签
9.时间轴
支持多种时间格式
10.支持导出和打印
自带导出和打印功能，能导出PNG,JPG,PDForSVG格式的图片，也能直接打印报表
11.支持缩放
12.外部数据加载
数据来自JavaScript数组中，可以定义在本地配置对象中或者外部加载
经典案例：
//页面加载时调用
$（document）.ready（function（）{
//获取JSON对象
vardata=jQuery.parseJSON（'
${requestScope._JSON_DATA_}'
）;
//显示图表
showChart（width,data）;
}）;
这个data就是获取到的JavaScript数组，将提供给highcharts作为数据源
13.支持图表反转或者轴反转
14.支持标签旋转
二、why
由于Highcharts具有强兼容性、灵活易用性、画面效果好等特点，能被广泛用于报表开发。
三、How
3.1安装
3.1.1引入Js
引入Jquery和Highcharts两个Js文件即可，Jquery用于获取Js数组数据（当然这里也可以是其它的工具去获取数据），Highcharts用于展现图表
<
scripttype="
text/javascript"
src="
../css/newMainjs/jquery-1.4.2.min.js"
>
/script>
src="
../script/highcharts/highcharts.js"
这些文件可以在Highcharts网站下载：
3.1.2初始化图表
在web页面的script标签，或者在一个单独的js文件中，初始化highcharts图表。
varchart1;
//globallyavailable
$（document）.ready（function（）{
chart1=newHighcharts.Chart（{
renderTo:
chart-container-1'
//这里设置highcharts图表所在的DIV
bar'
['
Apples'
'
Bananas'
Oranges'
]
Fruiteaten'
[{
name:
Jane'
data:
[1,0,4]
},{
John'
[5,7,3]
}]
3.1.3添加一个DIV
在你的web页面上添加一个DIV，并且给它一个ID，这个ID等于上面你在’renderTo’中设置的ID，这样就能把你的highcharts报表定位到你页面的指定位置。
3.1.4全局化的样式设置
如果需要给你的所有的highcharts图表一个统一的样式设置，可以新建一个js文件进行设置。
例如：
注意最后一句代码：
varhighchartsOptions=Highcharts.setOptions（Highcharts.theme）;
setOptions是highcharts提供的对报表进行设置的方法。
3.2如何设置图表
按照图示的结构，对Highcharts的每个属性进行设置，就能创建出各种不同的图表。
对照HighchartsAPI文档，可以详细的了解每个属性的含义，网址是，也可以从主页进入后再选择：
下面介绍一下其中的主要属性的含义：
3.2.1chart
Chart是关于图表的一般设置
其中常用的子属性是：
renderTo:
表示你要将图表显示在哪个页面元素里面，这里的’container’是一个DIV的ID
zoomType:
xy'
，表示缩放的类型，可以是’x’、’y’或者’xy’,分别表示横向、纵向和横纵向缩放
title:
设置highcharts报表标题
3.2.2xAxis
设置X轴，X轴默认是水平方向，当然你也可以通过它的属性进行反向设置
其中常用子属性：
categories
:
Array，设置了种类后，X轴将会显示你所设置的种类名字。
如果不设置，默认为[],也就是空数组，这样X轴默认会显示数字。
这里的X轴的categories设置的Array就是[‘201004’,’201005’,’201006’…]，也就是月份的数组集合
3.2.3yAxis
设置Y轴，Y轴默认是垂直方向，当然你也可以反向设置
Labels：
设置Y轴标签，它的结构是：
通常进行的设置是：
labels:
formatter:
function（）{
returnthis.value+'
'
;
//这里对Y轴上的数字进行格式化
},
style:
color:
#89A54E'
//显示的颜色
}
}
Title:
设置Y轴标题，结构是：
通常进行的设置是：
text:
//这里让标题显示为空
}
Min:
设置Y轴最小值
回到Highcharts所提到的功能之一：
可以多轴对比，接下来介绍怎么设置两根Y轴，先请看个例子：
yAxis:
[{//PrimaryyAxis
labels:
formatter:
returnthis.value+'
},
style:
color:
}
title:
text:
style:
color:
}
},
{//SecondaryyAxis
#4572A7'
labels:
formatter:
returnthis.value+'
},
opposite:
true,//表示这跟Y轴是右边的Y轴
min:
}]
相信你能看明白，其实两根Y轴就是yAxis属性里面有两个对象而已，第二个对象进行了反向的设置；
如果你只需要一根Y轴，那就设置一个对象即可。
3.2.4tooltip
设置鼠标滑过图表的某个系列或者某个点时的提示
常用子属性：
Formatter：
Function通过回调函数对提示进行格式化，例如：
tooltip:
formatter:
if（this.y>
10000）{
return'
+this.series.name+'
+Highcharts.numberFormat（this.y/10000,
0,'
.'
}else{
2,'
}
效果是：
，当鼠标移到蓝色柱子上，显示出：
库存量（万张）：
38，库存量（万张）是库存系列的名字，38是由数量经过格式化后得来的。
其中的numberFormat
是Highcharts自带的函数，能用于对数字进行格式化，用法如下：
numberFormat
（Numbernumber,[Numberdecimals],[StringdecimalPoint],[StringthousandsSep]）
String
第一个参数number:
你要格式化的数字；
第二个参数decimals（可选）:
你想保留的小数位数；
第二个参数decimalPoint（可选）:
小数点符号，默认为’.’；
第三个参数thousandsSep（可选）：
当数字超过1000，你想使用的千位分隔符。
这是老外喜欢用的，我们通常把它设置成’’，这样当数字大于1000的时候，就不会出现千分符了。
3.2.5legend
Legend这个单词在这里是图形图例的意思，这个属性就是用于设置图例
常用属性：
X:
设置图例的横向坐标。
例如让图例居中，就可以在这里进行设置
legend:
x:
width/2-150
这里的width是highcharts图表所在的DIV的宽度
3.2.6plotOptions
用来对series进行统一的设置，series有3个不同级别的设置：
1．针对所有的Series,这可以在plot
升级会员 