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对象。
案例
- 显示一个静态的折线图,要求显示data1.txt文件中的气象数据。
- 将第一个案例改成直方图,并在每个方块上线上温度值。
- 在第一个案例中进行修改,不显示版权信息,并将折线图更改为曲线图。
- 在第三个案例中进行修改,进行辅助线的显示、定制legend(图例)、Tooltip(数据显示框)以及数据输出(中文)。要求当鼠标移动到对应节点的时候,显示辅助线,另外要求分别显示平均最高气温和最低气温的辅助线;要求legend显示在覆盖图表,并显示在左上角;要求数据提示框同时显示最高温度和最低温度。
- 显示一个饼图,要求显示data2.txt中的浏览器用户数据。
- 在第5个案例的基础上,要求点击某个浏览器扇形后,在另外一个容器中显示该浏览器具体的用户使用数据,具体数据在data3.txt中。
- 显示中国各省份用户ip访问量的展示图,具体数据在data4.txt。
- 【实践操作】在iPhone上创建你的第一个机器学习模型
- WP8微信5.3开始内测 支持Cortana语音 两微破冰了?
- 数据库进程间通信解决方案之MQ
- Extjs4.2 rest 与webapi数据交互----顺便请教了程序员的路该怎么走
- 这或许是对小白最友好的python入门了吧——7,组织列表
- 这或许是对小白最友好的python入门了吧——6,删除列表元素
- 集群开源软件赏:JGroups
- 看到他我一下子就悟了---委托
- 这或许是对小白最友好的python入门了吧——5,修改和添加列表元素
- 这或许是对小白最友好的python入门了吧——4,列表
- 【深度学习】自动驾驶:使用深度学习预测汽车的转向角度
- 这或许是对小白最友好的python入门了吧——3,数字处理
- 数据库恢复方案
- 这或许是对小白最友好的python入门了吧——2,变量和字符串
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- H3C 配置管理实验
- 融入ThingJS 3D可视化方案,让城市管线更加智能、高效
- 类加载机制浅记
- 聊聊dubbo-go的nacosRegistry
- Java离Linux内核有多远?
- 关于懒汉模式和恶汉模式的区别
- Chrome 新功能 — CSS Overview 尝鲜
- 0门槛,轻松实现条形竞赛图动画
- 读懂数据库中的乐观锁和悲观锁和MVCC
- CentOS 7.x安装微服务网关Apache APISIX
- Sentinel规则Pull模式持久化
- 如何用Cloudbase Framework部署一个Vue项目?
- 第17问:如何评估 alter table 的进度?
- 【LeeCode 困难 python3】329. 矩阵中的最长递增路径
- 干!一张图整理了 Python 所有内置异常