数据展示前端框架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为比较大的值。

   


目录
相关文章
|
11月前
|
存储 监控 安全
前端框架的数据驱动方式如何保证数据的安全性?
总之,前端框架的数据驱动方式需要综合运用多种手段来保证数据的安全性。从传输、存储、访问控制到防范攻击等各个方面进行全面考虑和实施,以确保用户数据的安全可靠。同时,不断加强安全管理和技术创新,以应对不断变化的安全挑战。
380 60
|
7月前
|
前端开发 Cloud Native Java
Java||Springboot读取本地目录的文件和文件结构,读取服务器文档目录数据供前端渲染的API实现
博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
Java||Springboot读取本地目录的文件和文件结构,读取服务器文档目录数据供前端渲染的API实现
|
8月前
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
535 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
JSON 前端开发 Java
震惊!图文并茂——Java后端如何响应不同格式的数据给前端(带源码)
文章介绍了Java后端如何使用Spring Boot框架响应不同格式的数据给前端,包括返回静态页面、数据、HTML代码片段、JSON对象、设置状态码和响应的Header。
500 2
震惊!图文并茂——Java后端如何响应不同格式的数据给前端(带源码)
|
12月前
|
监控 JavaScript 前端开发
前端的混合之路Meteor篇(六):发布订阅示例代码及如何将Meteor的响应数据映射到vue3的reactive系统
本文介绍了 Meteor 3.0 中的发布-订阅模型,详细讲解了如何在服务器端通过 `Meteor.publish` 发布数据,包括简单发布和自定义发布。客户端则通过 `Meteor.subscribe` 订阅数据,并使用 MiniMongo 实现实时数据同步。此外,还展示了如何在 Vue 3 中将 MiniMongo 的 `cursor` 转化为响应式数组,实现数据的自动更新。
178 2
|
12月前
|
JSON 分布式计算 前端开发
前端的全栈之路Meteor篇(七):轻量的NoSql分布式数据协议同步协议DDP深度剖析
本文深入探讨了DDP(Distributed Data Protocol)协议,这是一种在Meteor框架中广泛使用的发布/订阅协议,支持实时数据同步。文章详细介绍了DDP的主要特点、消息类型、协议流程及其在Meteor中的应用,包括实时数据同步、用户界面响应、分布式计算、多客户端协作和离线支持等。通过学习DDP,开发者可以构建响应迅速、适应性强的现代Web应用。
673 2
|
JavaScript 前端开发 Python
django接收前端vue传输的formData图片数据
django接收前端vue传输的formData图片数据
203 4
|
前端开发 JavaScript
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet,包括前端表单的创建、数据的一级和二级验证,以及后端servlet的注解和参数获取。
这篇文章介绍了使用AJAX技术将前端页面中表单接收的多个参数快速便捷地传输到后端servlet的方法,并通过示例代码展示了前端JavaScript中的AJAX调用和后端servlet的接收处理。
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet,包括前端表单的创建、数据的一级和二级验证,以及后端servlet的注解和参数获取。
|
前端开发
第一种方式:使用form表单将前端数据提交到servelt(将前端数据提交到servlet)
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet,包括前端表单的创建、数据的一级和二级验证,以及后端servlet的注解和参数获取。
第一种方式:使用form表单将前端数据提交到servelt(将前端数据提交到servlet)
|
12月前
|
NoSQL 前端开发 MongoDB
前端的全栈之路Meteor篇(三):运行在浏览器端的NoSQL数据库副本-MiniMongo介绍及其前后端数据实时同步示例
MiniMongo 是 Meteor 框架中的客户端数据库组件,模拟了 MongoDB 的核心功能,允许前端开发者使用类似 MongoDB 的 API 进行数据操作。通过 Meteor 的数据同步机制,MiniMongo 与服务器端的 MongoDB 实现实时数据同步,确保数据一致性,支持发布/订阅模型和响应式数据源,适用于实时聊天、项目管理和协作工具等应用场景。
311 0

热门文章

最新文章

  • 1
    前端工程化演进之路:从手工作坊到AI驱动的智能化开发
  • 2
    Vue 3 + TypeScript 现代前端开发最佳实践(2025版指南)
  • 3
    实现“永久登录”:针对蜻蜓Q系统的用户体验优化方案(前端uni-app+后端Laravel详解)-优雅草卓伊凡
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数