Hadoop数据分析平台实战——190Highcharts介绍

离线数据分析平台实战——190Highcharts介绍

Highcharts介绍

Highcharts 是Highsoft提供的一个用纯JavaScript编写的一个图表库， 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。
HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表等。
Highcharts特点：兼容性强、图表的主题类型多、操作性强、使用简单。
除了Highcharts以外，Highsoft还提供了Highstock和Highmaps，分别显示分时数据和地图。

环境配置

一般将Highcharts和jQuery一起使用，所以需要引入highcharts.js和jquery.min.js两个js文件；
如果需要使用Highstock，那么需要需要引入highstock.js；
Highmaps需要引入highmaps.js。
对应js下载地址:http://www.hcharts.cn/product/download.php。
这里选用highcharts4.1.8和highmaps1.1.8。

Highcharts资源文件目录介绍

|-- examples           例子目录
|-- exporting-server   导出服务器目录
|-- gfx                图片资源目录
|-- graphics           图片资源目录 
|-- js                 所有 js 文件源码代码（带 .src 的文件为未压缩版源代码）
|-- index.htm          例子入口文件 

Highcharts介绍

https://api.hcharts.cn/highcharts

图表容器chart创建/绑定

highcharts支持两种方式进行chart对象的创建，
分别是第一种"$("#container").highcharts({....})"；
第二种是"var charts = new Highcharts.Chart({chart : {renderTo : "container"}});" ,
第二种方式要求renderTo指定的值一定是容器ID。
通过这两种方式都可以给对应容器绑定chart对象，当绑定完成后，
可以通过$("#container").highcharts()来获取绑定的chart对象。

案例

1. 显示一个静态的折线图，要求显示data1.txt文件中的气象数据。
2. 将第一个案例改成直方图，并在每个方块上线上温度值。
3. 在第一个案例中进行修改，不显示版权信息，并将折线图更改为曲线图。
4. 在第三个案例中进行修改，进行辅助线的显示、定制legend(图例)、Tooltip(数据显示框)以及数据输出(中文)。要求当鼠标移动到对应节点的时候，显示辅助线，另外要求分别显示平均最高气温和最低气温的辅助线；要求legend显示在覆盖图表，并显示在左上角；要求数据提示框同时显示最高温度和最低温度。
5. 显示一个饼图，要求显示data2.txt中的浏览器用户数据。
6. 在第5个案例的基础上，要求点击某个浏览器扇形后，在另外一个容器中显示该浏览器具体的用户使用数据，具体数据在data3.txt中。
7. 显示中国各省份用户ip访问量的展示图，具体数据在data4.txt。