前端之【数据可视化】

目录

  • 🌟前言
  • 🌟为什么要数据可视化(优点)
  • 🌟前端数据可视化框架
    • 🌟Echarts
    • 🌟Highcharts
    • 🌟D3
  • 🌟数据可视化框架的选择
  • 🌟写在最后

在这里插入图片描述

🌟前言

数据可视化主要旨在借助于图形化手段,清晰有效地传达与沟通信息。简单来说,数据可视化就是将数据以图表、动画等形式展现出来,供人们方便的查看数据。
在这里插入图片描述

🌟为什么要数据可视化(优点)

传递速度快,人脑对视觉信息的处理要比书面信息块10倍。使用图表来总结复杂的数据,可以确保对关系的理解要比那些混乱的报告或电子表格更快。
数据显示的多维性,在可视化的分析下,数据将每一维的值分类、排序、组合和显示,这样就可以看到表示对象或事件的数据的多个属性或变量。
更直观的展示信息,大数据可视化报告使我们能够用一些简短的图形就能体现那些复杂信息,甚至单个图形也能做到。

🌟前端数据可视化框架

前端数据可视化的框架有很多,每个框架都有自己优缺点,这里我们主要介绍下面三个。使用的时候根据项目的要求进行选择。

🌟Echarts

Echarts 完全免费,代码开源。
Echarts 基于Canvas,(ECharts v3.8 发布了 SVG 渲染器)适用于数据量比较大的情况。
Echarts 兼容 IE6 及以上的所有主流浏览器,同样支持移动端的缩放和手势操作。 echarts 百度的良心库,echarts入手简单,文档清晰,效果绚丽,主要是国产,文档也很容易看。
echarts 支持按需求打包,可以在线构建项目时,选择项目所需要使用到的模块,从而达到减小JS文件的体积 echarts 的体积较大。echarts的可定制性差,hightcharts也是如此,如果出现了要绘制配置中不支持的图表,那么就只能放弃,尝试着使用其他的框架。

🌟Highcharts

Highcharts 非商业免费,商业需授权,代码开源。
Highcharts 基于SVG,方便自己定制,但图表类型有限。
Highcharts 兼容 IE6 及以上的所有主流浏览器,完美支持移动端缩放、手势操作。

🌟D3

D3 完全免费,代码开源。
D3.v3 基于SVG,方便自己定制;D3.v4支持Canvas+SVG,如果计算比较密集,也可以选择用Canvas。除此之外,D3图表类型非常丰富,几乎可以满足所有开发需求,但代码相对于以上两个插件来说,会稍微难一点。
D3 兼容IE9 及以上的所有主流浏览器,对于移动端的兼容性也同上。
D3.js 入门略麻烦,但效果繁多,组建灵活,而且还有专门的书来讲解怎么做,可以说发展到现在已经是全世界公认的第一可视化框架

🌟数据可视化框架的选择

这三个插件都兼容IE9及以上的所有主流浏览器,但如果开发需求中包括IE7/IE8,那么就只能选择Highcharts或者Echarts了。
三个插件中只有Highcharts用于商业用途中时需要授权,其他两个都不需要。
D3相对于其他两个来说比较难,如果数据量比较大,可以考虑Echarts;如果只是一些简单的数据,且客户对界面定制较多,则可以考虑使用highcharts;如果前两者都不能满足需求,那么就只能用D3来一点一点做了。

🌟写在最后

更多前端知识请大家持续关注,尽请期待。各位小伙伴让我们 let’s be prepared at all times!

✨原创不易,还希望各位大佬支持一下!
👍 点赞,你的认可是我创作的动力!
⭐️ 收藏,你的青睐是我努力的方向!
✏️ 评论,你的意见是我进步的财富!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/160358.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

浅谈智能照明控制系统应用在城市轨道交通

叶根胜 江苏安科瑞电器制造有限公司 江苏江阴 214405 摘要:在传统的城市轨道交通设计方面,照明设计方案具有一定的弊端。随着计算机技术的发展,智能化技术渐渐步入人们的生活并成为主流,故在城市轨道交通中应用新型的照明控制设…

论文阅读:CenterFormer: Center-based Transformer for 3D Object Detection

目录 概要 Motivation 整体架构流程 技术细节 Multi-scale Center Proposal Network Multi-scale Center Transformer Decoder Multi-frame CenterFormer 小结 论文地址:[2209.05588] CenterFormer: Center-based Transformer for 3D Object Detection (arx…

【软考】9.2 串/数组/矩阵/广义表/树

《字符串》 一种特殊的线性表,数据元素都为字符模式匹配:寻找子串第一次在主串出现的位置 模式匹配算法 1. 暴力破解法(布鲁特-福斯算法) 主串与子串一个个匹配效率低 2. KMP算法 主串后缀和子串前缀能否找到一样的元素&#xf…

[计算机提升] 用户和用户组

1.1 用户和用户组 1.1.1 用户 用户账户是计算机操作系统中用于标识和管理用户身份的概念。 每个用户都拥有一个唯一的用户账户,该账户包含用户的登录名、密码和其他与用户身份相关的信息。 用户账户通常用于验证用户身份,并授权对系统资源的访问权限。…

用PHP爬取视频代码示例详细教程

以下是一个使用Symfony Panther和PHP进行爬虫的示例程序&#xff0c;用于爬虫企鹅上的视频。请注意&#xff0c;这个示例需要使用https://www.duoip.cn/get_proxy这段代码获取爬虫IP。 <?php // 引入所需的库 require vendor/autoload.php;use Symfony\Component\Panther\P…

【已解决】No Python at ‘D:\Python\python.exe‘

起因&#xff0c;我把我的python解释器&#xff0c;重新移了个位置&#xff0c;导致我在Pycharm中的爬虫项目启动&#xff0c;结果出现这个问题。 然后&#xff0c;从网上查到了这篇博客: 【已解决】No Python at ‘D:\Python\python.exe‘-CSDN博客 但是&#xff0c;按照上述…

LeetCode 137. 只出现一次的数字 II【哈希表;位运算;数字逻辑;DFA】中等

本文属于「征服LeetCode」系列文章之一&#xff0c;这一系列正式开始于2021/08/12。由于LeetCode上部分题目有锁&#xff0c;本系列将至少持续到刷完所有无锁题之日为止&#xff1b;由于LeetCode还在不断地创建新题&#xff0c;本系列的终止日期可能是永远。在这一系列刷题文章…

尚硅谷Docker核心技术

目录 第1课时 docker_前提知识要求和课程简介第2课时 docker_为什么会出现第3课时 docker_理念第4课时 docker_是什么&#xff1f;第5课时 docker_能干什么第6课时 docker_3要素第7课时 centos6安装Dockercentos7安装Docker第9课时 阿里云镜像加速器配置第10课时 helloworld镜像…

pycharm社区版创建Django项目的一种方式

pycharm社区版创建Django项目 pycharm创建New project安装django&#xff0c;如果安装过可略过安装完成后查看安装情况生成Django项目需要的文件这里注意生成语句后面的 . 不可以省略 生成文件后&#xff0c;框架搭建完成&#xff0c;配置启动我这里在配置完后&#xff0c;报了…

JAVAEE初阶相关内容第十四弹--网络初识

写在前&#xff1a; 这一部分开启网络部分的相关知识&#xff0c;这一弹内容初始网络将主要进行网络相关知识的简单介绍&#xff0c;以及着重介绍协议、协议分层、OSI七层模型、TCP/IP五层模型、封装和分用。 需要认识协议&#xff0c;并知道协议的效果是什么&#xff1b;知道…

RN(React Native)的应用程序在雷电模拟器可以运行,安卓真机运行失败问题解决记录

yarn react-native build-android打包的apk在真机安卓运行提示&#xff1a; Unable to load script . Make sure you re either running Metro ( run npx react - native start ) or that your bundle index . android . bundle is packaged correctly for release . jn…

微服务12-分布式服务理论基础+Seata的认识

文章目录 分布式服务理论基础前言微服务和分布式的区别CAP定理BASE理论 Seata流程&#xff1a;seata部署微服务集成seata 分布式服务理论基础 前言 单体架构&#xff1a; 1.项目过于臃肿&#xff0c;所有服务在一起&#xff0c;一个业务挂了&#xff0c;整个项目就不能用了&…

哪个牌子的电容笔好用?ipad触控笔推荐平价

有哪些电容笔适合学生党入手&#xff1f;苹果Pencil虽然与普通的电容笔&#xff0c;不同的是&#xff0c;这款电容笔同时具有重力传感器和倾斜传感器&#xff0c;而平替电容笔&#xff0c;只有一种倾斜传感器&#xff0c;但在书写方面的体验很不错&#xff0c;可以用来写字&…

【算法|前缀和系列No.4】leetcode238. 除自身以外数组的乘积

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【手撕算法系列专栏】【leetcode】 &#x1f354;本专栏旨在提高自己算法能力的同时&#xff0c;记录一下自己的学习过程&#xff0c;希望…

如何实现前端数据持久化(LocalStorage、IndexedDB等)?

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…

MySQL InnoDB引擎深入学习的一天(InnoDB架构 + 事务底层原理 + MVCC)

目录 逻辑存储引擎 架构 概述 内存架构 Buffer Pool Change Buffe Adaptive Hash Index Log Buffer 磁盘结构 System Tablespace File-Per-Table Tablespaces General Tablespaces Undo Tablespaces Temporary Tablespaces Doublewrite Buffer Files Redo Log 后台线程 事务原…

Hadoop 配置 Kerberos 认证

1、安装 Kerberos 服务器和客户端 1.1 规划 服务端&#xff1a; bigdata3 客户端&#xff08;Hadoop集群&#xff09;&#xff1a; bigdata0 bigdata1 bigdata2 192.168.50.7 bigdata0.example.com bigdata0 192.168.50.8 bigdata1.example.com bigdata1 192.168.50.9 b…

4.Python-用Python,Ajax实现MySQL数据库的新增数据

题记 用python&#xff0c;ajax实现mysql数据库的新增数据。以下是一个简单的实例和操作过程。 安装flask模块 pip install flask 安装mysql.connector模块 pip install mysql-connector-python 编写app.py文件 app.py文件如下&#xff1a; 块引用可能显示不完整&#x…

第15章 SpringBoot

所有的流程逻辑原理都是针对2.3.2.RELEASE版本 15.1 谈谈你对微服务架构演进的理解 难度:★ 重点:★ 白话解析 还是串主线,在串主线的过程中发现问题,解决问题。主线的入口:随着业务的逻辑越来越复杂,架构再不断升级演进,先理解架构的演进。 这道题参考了:企业IT架构转…

kantts docker化

kan-tts docker本地化 环境安装 下载docker镜像(python3.8的) registry.cn-hangzhou.aliyuncs.com/modelscope-repo/modelscope:ubuntu20.04-cuda11.8.0-py38-torch2.0.1-tf2.13.0-1.9.2 安装基础模型 pip install modelscope 安装语音模型 pip install "modelscope…