利用Highcharts制做web图表学习（一）

前言：最近项目中须要对数据进行汇总和分析得出柱状图或曲线图这样散装点图，通过学习和测试发现Highchart不错，若是你们项目中须要的话，不妨看看有的例子摘自官网

 

1、先说说HighCharts的主要特性包括：

1.兼容性：HighCharts采用纯JavaScript编写，兼容当今大部分的浏览器，包括Safari、IE和火狐等等；

2.图表类型：HighCharts支持图表类型，包括曲线图、区域图、柱状图、饼状图、散状点图和综合图表等等，能够知足各类需求。

3.不受语言约束：HighCharts能够在大多数的WEB开发中使用，而且对我的用户免费，支持ASP，PHP，JAVA，.NET等多种语言中使用。

4.提示功能：HighCharts生成的图表中，能够设置在数据点上显示提示效果，即将鼠标移动到某个数据点上，能够显示该点的详细数据，而且能够对显示效果进行设置。

5.放大功能：HighCharts能够大量数据集中显示，而且能够放大某一部分的图形，将图表的精度增大，进行详细的显示，能够选择横向或者纵向放大。

6.时间轴：能够精确到毫秒。

2、接下来了解highcharts的基本组成

一般状况下，Highcharts包含标题（Title）、坐标轴（Axis）、数据列（Series）、数据提示框（Tooltip）、图例（Legend）、版权信息（Credits）等，高级的还包括导出功能按钮（Exporting）、标示线（PlotLines）、标示区域（PlotBands）等。

Highcharts基本组成部分以下图所示

图2-1 Highcharts基本组成部分

Highcharts主要组成

Title

图表标题，包含标题和副标题（subTitle），其中副标题是非必须的。

Axis

坐标轴，包含x轴（xAxis）和y轴（yAxis）。一般状况下，x轴显示在图表的底部，y轴显示在图表的左侧。多个数据列能够共同使用同一个坐标轴，为了对比或区分数据，Highcharts提供了多轴的支持。

Series

数据列。图表上一个或多个数据系列，好比曲线图中的一条曲线，柱状图中的一个柱形。

Tooltip

数据提示框。当鼠标悬停在某点上时，以框的形式提示该点的数据，好比该点的值，数据单位等。数据提示框内提示的信息彻底能够经过格式化函数动态指定。

Legend

图例。用不一样形状、颜色、文字等 标示不一样数据列，经过点击标示能够显示或隐藏该数据列。

Credits

图表版权信息。显示在图表右下方的包含连接的文字，默认是Highcharts官网地址。经过指定credits.enabled=false便可不显示该信息。

Exporting

导出功能按钮。经过引入exporting.js便可增长图表导出为常见文件功能。

PlotLines

标示线（或辅助线）。能够在图表上增长一条标示线，好比平均值线，最高值线等。

PlotBands

标示区域（分辨带）。能够在图表添加不一样颜色的区域带，标示出明显的范围区域。