Highcharts图表使用说明.docx

Highcharts图表使用说明.docx

《Highcharts图表使用说明.docx》由会员分享，可在线阅读，更多相关《Highcharts图表使用说明.docx（18页珍藏版）》请在冰豆网上搜索。

Highcharts图表使用说明

Highcharts图表使用说明

目录

1.简介2

2.特点3

2.1.兼容3

2.2.免费用于非商业3

2.3.开源3

2.4.纯JavaScript3

2.5.众多的图表类型3

2.6.简单的配置语法3

2.7.动态3

2.8.多个轴3

2.9.工具提示标签3

2.10.日期时间轴3

2.11.导出和打印3

2.12.缩放3

2.13.载入外部资料3

2.14.倒置图表或扭转轴3

2.15.标签的文本旋转3

3.Highcharts图表预览3

3.1.柱状图3

3.2.直线图3

3.3.曲线图3

3.4.饼状图3

3.5.区域图3

3.6.区域曲线图3

3.7.散布图3

3.8.堆状图3

3.9.其他3

4.Highcharts调用范例3

4.1.实际效果图：

3

4.2.前台代码及部分代码说明3

4.3.后台代码3

4.4概述exporting.js文件3

5.补充3

1.简介

Highcharts是一个制作图表的纯Javascript类库，主要特性如下：

∙兼容性：

兼容当今所有的浏览器，包括iPhone、IE和火狐等等；

∙对个人用户完全免费；

∙纯JS，无BS；

∙支持大部分的图表类型：

柱状图，直线图，曲线图、区域图、区域曲线图、饼装图、散布图等；

∙跨语言：

不管是PHP、A还是Java都可以使用，它只需要三个文件：

一个是Highcharts的核心文件highcharts.js，还有acanvasemulatorforIE和Jquery类库或者MooTools类库；

∙提示功能：

鼠标移动到图表的某一点上有提示信息；

∙放大功能：

选中图表部分放大，近距离观察图表；

∙易用性：

无需要特殊的开发技能，只需要设置一下选项就可以制作适合自己的图表；

∙时间轴：

可以精确到毫秒；

∙Ajax支持：

使用数组接受Ajax传值

2.特点

2.1.兼容

它的工作原理在所有现代浏览器，包括iPhone/iPad和InternetExplorer的版本6。

标准的浏览器使用SVG图形渲染。

在传统的InternetExplorer的图形绘制使用VML。

2.2.免费用于非商业

你想使用一个个人网站，学校网站或非营利组织Highcharts吗？

那么你就没有需要作者的许可，去使用Highcharts。

对于商业网站和项目， 许可和定价。

2.3.开源

Highcharts的主要特点之一是开放的源代码。

下的任何许可证，或不自由，你可以下载的源代码，并让自己的编辑。

这允许个人修改和极大的灵活性。

2.4.纯JavaScript

Highcharts完全是基于本机的浏览器技术，不需要像Flash或Java客户端插件。

此外，你不需要在服务器上安装任何东西。

没有PHP或ASP.NET。

Highcharts需求只有两个JS文件运行：

highcharts.js核心，无论是在jQuery，MooTools的或Prototype框架。

这些框架之一，是最有可能已经在您的网页中使用。

2.5.众多的图表类型

Highcharts支持线，样条，面积，areaspline，柱形图，条形图，饼图，散点图类型。

所有这些都可以结合在一个图表中。

2.6.简单的配置语法

设置的Highcharts配置选项，不需要特殊的编程技能。

在JavaScript对象符号的结构，这基本上是一个键和值用冒号连接的设置，由逗号分隔，并用花括号分组选项。

2.7.动态

通过一个完整的API，你可以添加，删除和修改系列和数据点或修改轴图表创建后的任何时间。

许多活动提供对图表进行编程的钩子。

使用jQuery，MooTools的或原型的AjaxAPI相结合，这将打开值从服务器，用户提供的数据和更不断更新的生活图表一样的解决方案。

2.8.多个轴

有时你想比较的变量是不一样的规模-例如温度与降雨量和空气压力。

Highcharts让您指定每个系列的y轴-或X轴，如果你想比较不同类别的数据集。

每个轴都可以放在左边或右边，顶部或图表的底部。

所有的选项都可以单独设置，包括倒车，造型和位置。

2.9.工具提示标签

徘徊图表Highcharts每个点和一系列的信息可以显示一个工具提示文本。

工具提示用户移动鼠标的图形，并已经采取了很大的努力，使其坚持的最近点，以及低于另一点是一个点，使其易于阅读。

2.10.日期时间轴

75％的X和Y轴的所有图表X轴的日期时间。

因此Highchart有关时间值是非常聪明的。

毫秒轴单位，Highcharts确定在何处放置蜱，使他们始终标志开始的一个月或一周，午夜和中午，整整一个小时等。

2.11.导出和打印

启用与出口的模块，用户可以出口图表PNG，JPG，PDF或SVG格式，点击一个按钮，或直接从网页打印图表。

2.12.缩放

放大图表，您可以检查数据更加紧密，特别是有趣的部分。

缩放可以在X或Y尺寸，或两者。

2.13.载入外部资料

HighchartsJavaScript数组，它可以在本地配置对象定义在一个单独的文件，甚至在不同的网站，数据。

此外，数据可以被处理过任何形式的Highcharts，和一个回调函数用于解析到一个数组中的数据。

2.14.倒置图表或扭转轴

有时你需要翻转您的图表，使X轴例如条形图一样，出现垂直。

最接近到ORIGO出现的最高值的扭转轴，也是支持的。

2.15.标签的文本旋转

所有文字标签，包括轴的标签，数据标签点和坐标轴标题，可以在任意角度的旋转。

3.Highcharts图表预览

3.1.柱状图

3.2.直线图

3.3.曲线图

3.4.饼状图

3.5.区域图

3.6.区域曲线图

3.7.散布图

3.8.堆状图

3.9.其他

4.Highcharts调用范例

基于.net版本

4.1.实际效果图：

4.2.前台代码及部分代码说明

<%--必要基础库--%>

<%--图形化处理JS文件--%>

<%--打印/联网下载图片等js文件--%>（详见附录4.4.）

<%----%>

<%--主题样式--%>

<%----%>

<%--页面调用方法--%>

   //chart值对象json数据

varchart_value={chart:

 {

                    renderTo:

 'container',          //放置图表的容器

                    defaultSeriesType:

 'column',    

//图表类型line, spline, area, areaspline, column, bar, pie , scatter

                    //zoomType:

 'x',                  //放大

                    inverted:

 false                  //左右显示，默认上下正向

                },

//图标的标题

                title:

 {                            

                    text:

 'XX百分比情况统计',        

                    style:

{}                        //标题样式

                },

                //图标的副标题

subtitle:

 {                         

                    text:

 '按XX统计'              

                },

                //X轴

xAxis:

 {                            

                    categories:

 <%= xAxisCategories %>,//坐标值

                    labels:

 {

                        rotation:

 -45,

                        align:

 'right',

                        style:

 {font:

 'normal 13px 宋体'}

                    }

                },

//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,

width:

650,

itemWidth:

210

                },

//提示信息

                tooltip:

 {

                    formatter:

 function（） {     //当鼠标悬置数据点时的格式化提示

                        return ''+ this.x +'
'+ this.series.name + ':

 '+ Highcharts.numberFormat（this.y, 1）;

                    }

                },

//划分选项

                plotOptions:

 {

                    column:

 {

cursor:

'pointer',//鼠标样式

                        pointPadding:

 0.2,  //图表柱形的

                        borderWidth:

 0    //图表柱形的粗细

},bar:

 {

                        dataLabels:

 {

                            enabled:

 false

                        }

                    }

                },

                series:

<%= returnValue %>};

      //主体调用方法

var chart;

        $（document）.ready（function（） {

             chart = new Highcharts.Chart（chart_value）; 

        }）;

//点击按钮值的显示与否

varflag=false;

functionshow_click（）

{

if（flag==false）

{

chart_value.plotOptions={

column:

{dataLabels:

{enabled:

true,

formatter:

function（）{returnthis.y+'小时';},

y:

-15}}};

chart=newHighcharts.Chart（chart_value）;

flag=true;

}

else{

chart_value.plotOptions={

column:

{dataLabels:

{enabled:

false,

formatter:

function（）{returnthis.y+'小时';},

y:

-15}}};

chart=newHighcharts.Chart（chart_value）;

flag=false;

}

}

 800px; height:

 500px; margin:

 0 2em">