文档介绍：该【Highcharts图表使用说明 】是由【小辰GG】上传分享，文档一共【16】页，该文档可以免费在线阅读，需要了解更多关于【Highcharts图表使用说明 】的内容，可以使用淘豆网的站内搜索功能，选择自己适合的文档，以下文字是截取该文章内的部分文字，如需要获得完整电子版，请下载此文档到您的设备，方便您编辑和打印。:.
1
Highcharts图表使用说明
目录
..............................................................................................................................2
..............................................................................................................................3
....................................................................................................................3
...................................................................................................3
....................................................................................................................3
.........................................................................................................4
...................................................................................................4
...................................................................................................4
....................................................................................................................5
.................................................................................................................5
......................................................................................................5
........................................................................................................6
........................................................................................................6
...................................................................................................................6
.....................................................................................................7
..............................................................................................7
.................................................................................................7
......................................................................................................8
.................................................................................................................8
.................................................................................................................8
.................................................................................................................9
...............................................................................................................10
...............................................................................................................10
........................................................................................................11
...............................................................................................................11
...............................................................................................................11
..................................................................................................................12
.....................................................................................................13
:....................................................................................................13
...................................................................................13
...........................................................................................................16
.........................................................................................16
............................................................................................................................16
1
:.
2
Highcharts是一个制作图表的纯Javascript类库,主要特性如下:
兼容性:兼容当今所有的浏览器,包括iPhone、IE和火狐等等;
对个人用户完全免费;
纯JS,无BS;
支持大部分的图表类型:柱状图,直线图,曲线图、区域图、区域曲线图、饼装图、
散布图等;
跨语言:不管是PHP、,它只需要三个文件:一个是
,还有acanvasemulatorforIE和Jquery类库或
者MooTools类库;
提示功能:鼠标移动到图表的某一点上有提示信息;
放大功能:选中图表部分放大,近距离观察图表;
易用性:无需要特殊的开发技能,只需要设置一下选项就可以制作适合自己的图表;
时间轴:可以精确到毫秒;
Ajax支持:使用数组接受Ajax传值
2
:.
3
它的工作原理在所有现代浏览器,包括iPhone/iPad和InternetExplorer的版本6。标准
的浏览器使用SVG图形渲染。在传统的InternetExplorer的图形绘制使用VML。
你想使用一个个人网站,学校网站或非营利组织Highcharts吗?那么你就没有需要作者的
许可,去使用Highcharts。对于商业网站和项目,许可和定价。
3
:.
4
Highcharts的主要特点之一是开放的源代码。下的任何许可证,或不自由,你可以下载的源
代码,并让自己的编辑。这允许个人修改和极大的灵活性。
Highcharts完全是基于本机的浏览器技术,不需要像Flash或Java客户端插件。此外,你
不需要在服务器上安装任何东西。。Highcharts需求只有两个JS文
件运行:,无论是在jQuery,MooTools的或Prototype框架。这些框架
之一,是最有可能已经在您的网页中使用。
Highcharts支持线,样条,面积,areaspline,柱形图,条形图,饼图,散点图类型。所有
这些都可以结合在一个图表中。
4
:.
5
设置的Highcharts配置选项,不需要特殊的编程技能。在JavaScript对象符号的结构,这
基本上是一个键和值用冒号连接的设置,由逗号分隔,并用花括号分组选项。
通过一个完整的API,你可以添加,删除和修改系列和数据点或修改轴图表创建后的任何时
间。许多活动提供对图表进行编程的钩子。使用jQuery,MooTools的或原型的AjaxAPI
相结合,这将打开值从服务器,用户提供的数据和更不断更新的生活图表一样的解决方案。
有时你想比较的变量是不一样的规模-例如温度与降雨量和空气压力。Highcharts让您指
定每个系列的y轴-或X轴,如果你想比较不同类别的数据集。每个轴都可以放在左边或
右边,顶部或图表的底部。所有的选项都可以单独设置,包括倒车,造型和位置。
5
:.
6
徘徊图表Highcharts每个点和一系列的信息可以显示一个工具提示文本。工具提示用户移
动鼠标的图形,并已经采取了很大的努力,使其坚持的最近点,以及低于另一点是一个点,
使其易于阅读。
75%的X和Y轴的所有图表X轴的日期时间。因此Highchart有关时间值是非常聪明的。
毫秒轴单位,Highcharts确定在何处放置蜱,使他们始终标志开始的一个月或一周,午夜和
中午,整整一个小时等。
启用与出口的模块,用户可以出口图表PNG,JPG,PDF或SVG格式,点击一个按钮,
或直接从网页打印图表。
6
:.
7
放大图表,您可以检查数据更加紧密,特别是有趣的部分。缩放可以在X或Y尺寸,或两
者。
HighchartsJavaScript数组,它可以在本地配置对象定义在一个单独的文件,甚至在不同的
网站,数据。此外,数据可以被处理过任何形式的Highcharts,和一个回调函数用于解析到
一个数组中的数据。
有时你需要翻转您的图表,使X轴例如条形图一样,出现垂直。最接近到ORIGO出现的最
高值的扭转轴,也是支持的。
所有文字标签,包括轴的标签,数据标签点和坐标轴标题,可以在任意角度的旋转。
7
:.
8
8
:.
9
9
:.
10
10
:.
11
11
:.
12
12
:.
13
:
<%--必要基础库--%>
<scriptsrc="../../js/"type="text/javascript"></script>
<%--图形化处理JS文件--%>
<scriptsrc="../../js/Highcharts/"type="text/javascript"></script>
<%--打印/联网下载图片等js文件--%>(.)
<%--<scriptsrc="../../js/Highcharts/"type="text/javascript"></script>--%>
<%--主题样式--%>
<%--<scriptsrc="../../js/Highcharts/themes/"type="text/javascript"></script>--%>
<%--页面调用方法--%>
<scripttype="text/javascript">
<scripttype="text/javascript">
//chart值对象json数据
varchart_value={chart:{
renderTo:'container',//放置图表的容器
defaultSeriesType:'column',
//图表类型line,spline,area,areaspline,column,bar,pie,scatter
//zoomType:'x',//放大
inverted:false//左右显示,默认上下正向
},
13
:.
14
//图标的标题
title:{
text:'XX百分比情况统计',
style:{}//标题样式
},
//图标的副标题
subtitle:{
text:'按XX统计'
},
//X轴
xAxis:{
categories:<%=xAxisCategories%>,//坐标值
labels:{
rotation:-45,
align:'right',
style:{font:'normal13px宋体'}
}
},
//Y轴
yAxis:{
min:0,
title:{text:'百分比'}
//Y轴坐标标题labels:纵柱标尺
},plotLines:[{
//区分线或可根据项目标出其基线value//表示显示数值width//显示宽px
value:0,
width:1,
color:'#808080',
}]
},
//【图例】位置样式
legend:{
layout:'horizontal',
//【图例】显示的样式:水平(horizontal)/垂直(vertical)
backgroundColor:'#FFFFFF',
borderColor:'#CCC',
borderWidth:1,
align:'center',
verticalAlign:'top',//默认为底部
enabled:true,
//x:100,
y:50,
//floating:true,
shadow:true,
14
:.
15
width:650,
itemWidth:210
},
//提示信息
tooltip:{
formatter:function(){//当鼠标悬置数据点时的格式化提示
return'<b>'++'</b><br/>'+
+':'+(,1);
}
},
//划分选项
plotOptions:{
column:{
cursor:'pointer',//鼠标样式
pointPadding:,//图表柱形的
borderWidth:0//图表柱形的粗细
},bar:{
dataLabels:{
enabled:false
}
}
},
series:<%=returnValue%>};
//主体调用方法
varchart;
$(document).ready(function(){
chart=(chart_value);
});
//点击按钮值的显示与否
varflag=false;
functionshow_click()
{
if(flag==false)
{
={
column:{dataLabels:{enabled:true,
formatter:function(){+'小时';},
y:-15}}};
chart=(chart_value);
flag=true;
}
else{
={
column:{dataLabels:{enabled:false,
15
:.
16
formatter:function(){+'小时';},
y:-15}}};
chart=(chart_value);
flag=false;
}
}
</script>
<divid="container"style="min-width:800px;height:500px;margin:02em"><
/div>
<buttonid="button"onclick="show_click()">Button</button>
publicstringreturnValue="
[{name:'XX比率1',
data:[{y:,value:194},{y:,value:5045},{y:,value:298}]},
{name:'XX比率2',
data:[{y:,value:173},{y:,value:5216},{y:,value:300}]},
{name:'XX比率3',
data:[{y:,value:230},{y:,value:5846},{y:,value:388}]},
{name:'XX比率4',
data:[{y:,value:101},{y:,value:2255},{y:,value:126}]},
{name:'XX比率5',
data:[{y:,value:43},{y:,value:1781},{y:,value:103}]},
{name:'XX比率6'
,data:[{y:,value:99},{y:,value:3158},{y:,value:176}]}]";
publicstringxAxisCategories="['XX制造业1','XX制造业2','XX制造业3']";
但由于部分功能链接官网去调用方法,所以在非联机的情况,且对图表没有打印功能要求,可以将其
屏蔽
Highcharts官网:
Highcharts官网示例:/
Highcharts官网文档:-to-use
16