首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Hadoop数据分析平台实战——190Highcharts介绍离线数据分析平台实战——190Highcharts介绍

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

作者头像
Albert陈凯
发布2018-04-08 11:29:24
1.2K0
发布2018-04-08 11:29:24
举报
文章被收录于专栏:Albert陈凯Albert陈凯

离线数据分析平台实战——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。
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017.08.31 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 离线数据分析平台实战——190Highcharts介绍
    • Highcharts介绍
      • 环境配置
        • Highcharts资源文件目录介绍
          • Highcharts介绍
            • 图表容器chart创建/绑定
              • 案例
              相关产品与服务
              容器服务
              腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
              领券
              问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档