专栏首页Albert陈凯Hadoop数据分析平台实战——190Highcharts介绍离线数据分析平台实战——190Highcharts介绍

Hadoop数据分析平台实战——190Highcharts介绍离线数据分析平台实战——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。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 2018-11-06 openhub.net开源项目。

    Albert陈凯
  • hbase的二级索引解决方案

    HBase的一级索引就是rowkey,我们只能通过rowkey进行检索。如果我们相对hbase里面列族的列列进行一些组合查询,就需要采用HBase的二级索引方案...

    Albert陈凯
  • Hbase二级索引

    二级索引与索引Join是多数业务系统要求存储引擎提供的基本特性,RDBMS早已支持,NOSQL阵营也在摸索着符合自身特点的最佳解决方案。这篇文章会以Hbase做...

    Albert陈凯
  • 直播预告 | 安全思享会-云原生安全技术发展研讨会

    腾讯安全正在积极推动“产业上云,安全第一”的安全理念,为助力各行各业数字化发展,并打造云原生安全理念,腾讯安全计划联合安全合作伙伴共建智慧安全生态。本次研讨会以...

    腾讯云大学
  • 手写webpack核心原理,再也不怕面试官问我webpack原理

    我们创建了add.js文件和minus.js文件,然后 在index.js中引入,再将index.js文件引入index.html。

    coder_koala
  • 腾讯安全打造真实云端攻防战 GeekPwn 云安全挑战赛0ops摘冠

    由腾讯安全云鼎实验室联合GeekPwn发起的 全球首个基于真实通用云环境的云安全挑战赛 今天下午正式结束。 ? 来自紫荆花、复旦白泽、0ops、AAA、Nu1...

    云鼎实验室
  • 腾讯云原生安全体系图谱正式发布,打造易用可信赖的云

    产业互联网时代,云计算IT架构以更简单的架构设计、更高的性价比、更灵活的系统颠覆了传统IT基础架构,但随着算力、IT架构、攻防节奏、以及数据资产的不断变化,也为...

    腾讯安全
  • 网页结构简介

    有人说“互联网中有50%以上的流量是爬虫”,第一次听这句话也许你会觉得这个说法实在太夸张了,怎么可能爬虫比用户还多呢?毕竟会爬虫的相对与不会爬虫的简直少之又少。

    测试小兵
  • 名称空间

    using 声明和using 编译指令 using 声明将特定的名称添加到它所属的声明区域中。 using std::cout; 将cout添加到声明区中,声明...

    lpxxn
  • 在腾讯云+未来安全论坛,听赵伟、TK、Killer讲段子是什么体验?

    又到一年一度的腾讯云+未来峰会,笔者有幸受邀参加安全论坛,来广州听赵伟、TK、Killer等顶尖大佬同场PK。都说羊城热情似火,本人作证此言非虚,一下飞机就被3...

    FB客服

扫码关注云+社区

领取腾讯云代金券