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 条评论
登录 后参与评论

相关文章

来自专栏北京马哥教育

手把手教你从无到有写一个运维APP

? 由于自己现在无业游民,所以没有什么现成的环境,环境就随便找个公网的。再者当下的完成度应该算不上一个完整的 APP,但是作为参考,依瓢画葫芦绝对足够了,如果...

42760
来自专栏张戈的专栏

实测Nginx服务器开启pagespeed加速效果

上周有一个站长问到我一个问题,问 fastcgi_cache 和 pagespeed 加速有没有冲突。略微想了下,2 个都是比较原生的主,应该不存在兼容问题。 ...

65990
来自专栏伪君子的梦呓

用 Python 制作微信好友个性签名词云图

0.前言 上次查看了微信好友的位置信息,想了想,还是不过瘾,于是就琢磨起了把微信好友的个性签名拿到,然后分词,接着分析词频,最后弄出词云图来。 1.环境说明 W...

53690
来自专栏微信终端开发团队的专栏

微信 SQLite 数据库修复实践

微信在后台服务器不保存聊天记录,微信在移动客户端所有的聊天记录都存储在一个 SQLite 数据库中,一旦这个数据库损坏,将会丢失用户多年的聊天记录。

81810
来自专栏IMWeb前端团队

前端自动化测试解决方案探析

前端测试一直是前端项目开发过程中机器重要的一个环节,高效的测试方法可以减少我们进行代码自测的时间,提高我们的开发效率,如果你的代码涉及的测试用例较多,而且项目需...

27570
来自专栏我就是马云飞

APK瘦身全面总结——如何从32.6M到13.6M

前言 之前我简单介绍了关于svg图片瘦身的问题,在公司,瘦身这个问题是我提出来的,所以这锅我背了。公司项目是32.6M,我给自己的要求就是低于20M。上周花了一...

20960
来自专栏FreeBuf

实现一个简单的Burp验证码本地识别插件

为什么要写一个这个东西呢?虽然现在好多大网站都不用图片验证码了,但是仍然有一部分陈旧的web系统用着一些简单的图片验证码。当遇到带有验证码,而验证码的形式又非常...

20140
来自专栏腾讯云安全的专栏

你熟悉的Android Root 方式有哪些?|附演示视频

30150
来自专栏熊二哥

常用工具(Windows版本)

为原有版本修改为markdown后的更新,这个编辑器真心不错,只需要把原来喜欢的表格改成列表即可。 代码工具 代码管理工具 SourceTree:支持wi...

20880
来自专栏大数据文摘

手把手 | 范例+代码:一文带你上手Python网页抓取神器BeautifulSoup库

21930

扫码关注云+社区

领取腾讯云代金券