数据展示前端框架Highcharts介绍

简介: 数据展示前端框架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组件/属性

 title: 图表标题,用于描述图表的作用。默认为chart title,设置为null就不显示。

   subTitle: 副标题,不是必须的,可以没有。

   exporting: 导出功能按钮,默认没有,必须通过引入exporting.js即可增加图表导出为常见文件功能。

   Tooltip: 数据提示框,当鼠标悬浮到某个数据点的时候,以提示框的形式提示节点数据,比如该点的值、数据单位等。可以通过自定义格式化函数动态指定。

   Series:数据列,具体显示数据。一个图表中可以有多个数据列,比如权限图中,一条曲线就是一个数据列。

   Legend: 图例,用不同的形状、颜色、文字等来标示不同的数据列,通过点击图例可以达到显示和隐藏该数据列的效果。

   Credits: 图表版权信息,显示在图表右下角的信息,默认为highchart官网。可以进行修改。

   yAxis: y坐标轴。默认显示在左侧。

   xAxis: x坐标轴。默认显示在底部。

   PlotLines: 标示线(辅助线),比如可以显示平均值线、最高值线等。

   PlotBands:标示区域(分辨带)。

highchart组成部分

二、Highcharts支持的图表类型

 三、Highcharts API

 highcharts的api其实就是它各个不同组件的一个实现,参考Highcharts组件/属性说明&http://www.hcharts.cn/api/index.php

 四、Highcharts资源文件目录介绍

 五、案例

   1. 显示一个静态的折线图,要求显示data1.txt文件中的气象数据。

   2. 将第一个案例改成直方图,并在每个方块上显示温度值。

   3. 在第一个案例中进行修改,不显示版权信息,并将折线图更改为曲线图。

   4. 在第三个案例中进行修改,进行辅助线的显示、定制legend(图例)、Tooltip(数据显示框)以及数据输出(中文)。要求当鼠标移动到对应节点的时候,显示辅助线,另外要求分别显示平均最高气温和最低气温的辅助线;要求legend显示在覆盖图表,并显示在左上角;要求数据提示框同时显示最高温度和最低温度&今日平均温度。

       a. 显示中文输出

       b. 定制legend

       c. 定制tooltip

       e. 显示平均温度辅助线(作业:当最高温度不显示的时候,最高平均温度这个辅助线也不显示,同理最低温度一样。)

           解决方案:(为了方便操作,可以将legend的属性floating修改为false,然后将最低气温的第一个值改成11,这样方便操作)

               公用部分: 使用自定义属性将平均温度辅助线分别添加到对应属性列中(也可以不添加)。

               i: 使用chart属性里面的events中的redraw方法,参考属性this.series[i].visible属性,该属性如果为true,表示该数据列显示,如果为false,表示该数据列不显示。然后再分别进行操作。

               ii:使用plotOptions中的series的events事件中的hide和show事件,这个就不用参考visible属性。

       f. 显示辅助线(x轴上)        

       

   5. 显示一个饼图,要求显示data2.txt中的浏览器用户数据。

   6. 在第5个案例的基础上,要求点击某个浏览器扇形后,在另外一个容器中显示该浏览器具体的用户使用数据,具体数据在data3.txt中。

   7. 显示中国各省份用户ip访问量的展示图,具体数据在data4.txt。

       需要下载中国地图js:http://code.highcharts.com/mapdata/

       

案例源码:https://download.csdn.net/download/JiShuiSanQianLi/12607368

注意:

   1. highcharts和highmaps默认显示高度为400px,如果需要显示比较大的一个图形,可以给外层的div添加一个style属性,并给定height为比较大的值。

   


相关文章
|
24天前
|
存储 JavaScript 前端开发
Vue.js表单开发宝藏工具集,让构建表单变得轻松又酷炫!
Vue Tiny Validate 是最小的验证库,如果你只需要最基本的功能,它可以帮你减轻负担。
24 3
|
1月前
|
XML Web App开发 前端开发
如何使用 UI5 前端框架进行图表(Chart)的绘制
如何使用 UI5 前端框架进行图表(Chart)的绘制
|
1月前
|
资源调度 JavaScript 前端开发
vue图表制作
vue图表制作
42 0
|
JavaScript 前端开发 容器
熹微~~~基于Vue开发的昏暗风格的响应式网页!
熹微~~~基于Vue开发的昏暗风格的响应式网页!
126 1
|
JavaScript API CDN
一个功能强大、好看的vue表格组件
支持Vue 3/Vue 2的一个表格组件,支持表格增删改、虚拟表格、复杂表格、树形表格、数据校验、懒加载、分页、弹窗、单元格样式设置、按钮自定义样式、表头样式、单元格合等功能。
1811 0
一个功能强大、好看的vue表格组件
|
数据可视化 JavaScript 前端开发
vue中引入echarts图表实现数据可视化
echarts是一款实现数据可视化非常强大的前端工具,本文来讲解具体如何使用
218 0
vue中引入echarts图表实现数据可视化
|
Web App开发 前端开发 JavaScript
如何设计动效图——前端SVG JavaScript库Raphaël介绍
如何设计动效图——前端SVG JavaScript库Raphaël介绍
184 0
如何设计动效图——前端SVG JavaScript库Raphaël介绍
|
JavaScript
用highcharts展现你的数据(一)
用highcharts展现你的数据(一)
用highcharts展现你的数据(一)
|
开发框架 前端开发 JavaScript
Bootstrap响应式前端框架笔记一——强大的栅格布局
Bootstrap响应式前端框架笔记一——强大的栅格布局
234 0
Bootstrap响应式前端框架笔记一——强大的栅格布局
|
JavaScript 前端开发 数据可视化
如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表
很多 Vue 项目中都需要 PDF 文件预览功能,比如合同 ERP,销售CRM,内部文档CMS管理系统,内置 PDF 文件在线预览功能。本文手把手教你搭建一套 PDF 预览组件嵌入到 Vue 项目中,实现 PDF 文件在线预览等 PDF 预览的所有常见功能。
276 0