使用Highcharts快速开发报表.docx
- 文档编号:3003626
- 上传时间:2022-11-17
- 格式:DOCX
- 页数:24
- 大小:270.49KB
使用Highcharts快速开发报表.docx
《使用Highcharts快速开发报表.docx》由会员分享,可在线阅读,更多相关《使用Highcharts快速开发报表.docx(24页珍藏版)》请在冰豆网上搜索。
使用Highcharts快速开发报表
一、what
Highcharts是一个纯JavaScript编写的图表库,它提供了一个将交互式的图表添加到您的网站或Web应用程序的简单方法。
Highcharts目前支持折线图,曲线图,块状图,块状-曲线图,柱形图,条形图,饼图和散点图类型。
官网:
它的主要特点有:
1.兼容性强
支持主流浏览器,包括Ipad/Iphone.
2.免费和开源
3.纯JavaScript
不需要任何浏览器插件
4.多样化的图表类型
支持折线图,曲线图,块状图,块状-曲线图,柱形图,条形图,饼图和散点图类型,在同一个报表中可以任意搭配各种类型的图形,例如:
5.简单的配置规则
设置Highcharts配置选项不需要特殊的编程技巧,所有选项都是JavaScript对象结构,键和值用冒号对应,不同键用逗号分隔,不同选项用括号分组。
如:
varoptions={
chart:
{
renderTo:
'container',
defaultSeriesType:
'column'
},
title:
{
text:
'FruitConsumption'
},
xAxis:
{
categories:
[]
},
yAxis:
{
title:
{
text:
'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用于展现图表
这些文件可以在Highcharts网站下载:
3.1.2初始化图表
在web页面的script标签,或者在一个单独的js文件中,初始化highcharts图表。
varchart1;//globallyavailable
$(document).ready(function(){
chart1=newHighcharts.Chart({
chart:
{
renderTo:
'chart-container-1',//这里设置highcharts图表所在的DIV
defaultSeriesType:
'bar'
},
title:
{
text:
'FruitConsumption'
},
xAxis:
{
categories:
['Apples','Bananas','Oranges']
},
yAxis:
{
title:
{
text:
'Fruiteaten'
}
},
series:
[{
name:
'Jane',
data:
[1,0,4]
},{
name:
'John',
data:
[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',表示你要将图表显示在哪个页面元素里面,这里的’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轴标题,结构是:
通常进行的设置是:
title:
{
text:
'',//这里让标题显示为空
style:
{
color:
'#89A54E'
}
}
Min:
设置Y轴最小值
回到Highcharts所提到的功能之一:
可以多轴对比,接下来介绍怎么设置两根Y轴,先请看个例子:
yAxis:
[{//PrimaryyAxis
labels:
{
formatter:
function(){
returnthis.value+'';
},
style:
{
color:
'#89A54E'
}
},
title:
{
text:
'',
style:
{
color:
'#89A54E'
}
}
},
{//SecondaryyAxis
title:
{
text:
'',
style:
{
color:
'#4572A7'
}
},
labels:
{
formatter:
function(){
returnthis.value+'';
},
style:
{
color:
'#4572A7'
}
},
opposite:
true,//表示这跟Y轴是右边的Y轴
min:
0
}]
相信你能看明白,其实两根Y轴就是yAxis属性里面有两个对象而已,第二个对象进行了反向的设置;如果你只需要一根Y轴,那就设置一个对象即可。
3.2.4tooltip
设置鼠标滑过图表的某个系列或者某个点时的提示
常用子属性:
Formatter:
Function通过回调函数对提示进行格式化,例如:
tooltip:
{
formatter:
function(){
if(this.y>10000){
return''+this.series.name+':
'
+Highcharts.numberFormat(this.y/10000,
0,'.','');
}else{
return''+this.series.name+':
'
+Highcharts.numberFormat(this.y/10000,
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
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 使用 Highcharts 快速 开发 报表