数据可视化引擎从0到1搭建学习

最新推荐文章于 2022-12-01 11:26:41 发布
最新推荐文章于 2022-12-01 11:26:41 发布
阅读量430 收藏 1
点赞数
文章标签： 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45818290/article/details/126606657
版权

数据可视化大屏现在非常热门，那么经过阅读参考一些文章数据可视化从0到1我们需要做的是这样几个步骤

目录

一、页面大致布局确定界面

二、组件库

三、拖拽器

四、动态渲染器

五、配置面板

六、控制中心

七、辅助功能

一、页面大致布局确定界面

参考阿里云的datav我们可以发现他的静态页面是这样的

那么我们可以将页面分为左中右三个区域，左面我们成为组件去，主要是用来存放组件以及图层；右面我们称之为配置区，主要用来设置组件的外观，配置数据已经设置页面的交互；中间我们称为画布。

二、组件库

组件库我们可以同样参考阿里云的datav，来定义一套组件结构和属性协议

图表 地图 信息 表格 控件 媒体 素材 模型 其他

 

 那么图表部分，我们可以选择的库有很多

 1.echarts  我们可以去MCChart 这里找许多样式的图表

 2.datav 亮点是有动态装饰效果，样式比较科技感，与其他库搭配使用 官网介绍 | DataV

 3.AntV

 4.g2

三、拖拽器

拖拽功能是们搭建可视化引擎的最核心部分，我们可以用原生的js来实现，也可以用成熟的拖拽库来实现他

1.react-beautiful-dnd 漂亮,可移植性 列表拖拽库

2.react-dnd 可帮助我们构建复杂的拖放界面，同时保持组件的分离

3.react-moveable 支持自由拖拽, 缩放, 参考线的灵活强大的拖拽库

4.react-grid-layout 强大的网格拖拽排序缩放库

5.mixitup 强大且高性能的列表卡片排序动画库

我们还可以设置参考线， 对齐线， 吸附等， 并且可以在拖拽的不同时期(比如onDragStart和onDragEnd)做不同的业务逻辑。这些 Moveable 都提供了对应的api支持， 大家可以参考使用。

四、动态渲染器

组件从左侧组件栏拖动到画布上之后，组件才开始真正的渲染，每个组件都是异步加载的（待学习）

五、配置面板

（待学习）

六、控制中心

（待学习）

七、辅助功能

（待学习）

不吃鱼皮
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
三维可视化引擎技术研究
qq_28605843的博客
03-08 661
Three.js是一款WebGL开源框架，利用简单直观的方式封装了3D图形编程中常用的对象，但是没有提供一些基础建模软件的插件，比如3dsmax的模型导出插件，只提供一些读3ds格式、fbx格式的场景，更多要配合更多扩展库完成。综合对比上述各类三维引擎框架后，这里采用Cesium.js作为开源三维引擎框架，Cesium.js通过HTML5网页标准和WebGL技术规范实现动态的三维场景显示和渲染，无需安装插件即可创建具有最佳性能、精度、视觉质量和易用性的世界级三维地球影像和地图，并具有丰富的开源社区内容。
vue-echarts实现多功能图表
dkjhl的博客
02-14 1267
作为前端人员，日常图表、报表、地图的接触可谓相当频繁，今天小编隆重退出前端框架之VUE结合百度echart实现中国地图+各种图表的展示与使用；作为“你值得拥有”专栏阶段性末篇，值得一看，主要实现功能：中国地图，环形图，折线图，柱形图，复杂交互，单选复选，地图跳点
ElGrapho高性能WebGL图数据可视化引擎
08-10
El Grapho：高性能WebGL图数据可视化引擎
图扑 Web 可视化引擎在仿真分析领域的应用
Hightopo的博客
07-14 356
仿真分析技术的应用范围涵盖社会的诸多方面，本文我们也对图扑可视化引擎在数值仿真分析领域的应用做了一些介绍。
数据可视化初探-从零开始开发一个渲染引擎概述
weixin_33939380的博客
08-26 526
项目地址在这里，欢迎fork和star 简介：在之前的项目中用过一些图表，比如Echart、chart.js等。遂对其比较感兴趣，恰好最近在看canvas相关的知识，故尝试写了一下可视化的渲染引擎。经过断断续续的开发，目前已实现了大部分基础图形。 总体架构设计 相信大家在项目开发中都或多或少的用过一些图表，让我们再看一下一个简单的图表是什么样的。 截图自EChart Demo 一个简单的条...
三维可视化引擎让空间数据管理更高效
Wearable_device的博客
08-25 945
iiRayhub是艾瑞博达全部产品的有机集成，包含了智慧应用开发所需的全部基础组件和核心应用功能。本篇介绍其集成的核心部分——iRay.viz三维可视化引擎，就是一套围绕空间数据进行高效管理、可视化操作、综合监控于一体的数据管理平台。
WebGL入门之基于WebGL的3D可视化引擎介绍
码为人生的博客
11-29 1736
WebGL是一种开放的Web标准，用于在任何兼容的浏览器上渲染图形，而无需额外的插件。它能够使用 HTML5 Canvas 元素动态生成图形，使网页设计师和开发人员可以轻松创建流畅的 2D 和 3D 效果。
G6图可视化引擎-其他
06-12
G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。旨在让关系变得透明，简单。让用户获得关系数据的 Insight。 基于 G6，用户可以快速搭建自己的 图分析 或 图编辑 应用。 G6...
基于可视化的VR编辑引擎
05-06
最终设计的VR编辑引擎采用完全可视化的“拖拽”设计方式，发布后的程序既可以在PC上运行，也可以在VR设备上运行.该引擎主要应用于教育培训领域，是具有易操作性、趣味性和先进性的实验教学辅助工具，可激发学习兴趣...
数据可视化助力智慧地铁迎接新时代
11-06
HT for Web 自主研发了强大的基于 HTML5 的 2D、3D 渲染引擎，为可视化提供了丰富的展示效果。在 2D 组态 和 3D 组态 上， 图扑软件（Hightopo，以下简称 HT ）的 HT for Web 产品有着丰富的组态可供选择，本文将...
vizflow：vizflow是一个ES6交互式可视化引擎
02-23
Vizflow 使用EcmaScript.6（ES6）编写的渲染循环库，没有其他外部依赖项。 与其他流行的交互式可视化库（如相比，Vizflow是一个相对较小的库，用于以更简单的设计向HTML5文档添加过渡效果和交互式可视化。 它没有专注于特定的应用程序（例如数据可视化），而是根据应用程序提供了一种用于运行动画，过渡效果，模拟，游戏等的引擎。 Vizflow使用符号$Z （读作“ bling Z”或“ dollar Z”）来定义其名称空间。 遵循DRY和KISS指南，该库的主要目标是使库在性能方面（尤其是在移动设备上）易于使用，小型且高效。 例子 该存储库中包含的index.html文件包含一个演示，用于我们的。 修改index.html文件，以最大的灵活性和最小的开销创建自己的交互式可视化，模拟和游戏。 在本地加载index.html文件以在开发环境中测试代码（需要运行本地服
G6图可视化引擎 v3.8.0
11-25
为您提供G6图可视化引擎下载，G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。旨在让关系变得透明，简单。让用户获得关系数据的 Insight。基于 G6，用户可以快速搭建自己的...
蚂蚁金服数据可视化引擎 G2 4.0 正式版发布！
寒冰屋的专栏
03-03 703
G2 是一套面向常规统计图表，以数据驱动的高交互可视化图形语法。 经历了为期半年的大规模底层重构和开发迭代，G2 4.0 终于和大家见面了。作为继 2017 年 11 月 22 日 G2 3.0 正式开源发布以来 G2 的第二次大版本发布，4.0 版本仍坚守着『打造数据驱动的高交互图形语法』的初心，在图形语法的基础上，新增了交互语法，同时在产品的功能、体验、易用性和灵活性等各个方面进行了...
万博思图-HPLC数据可视化分析引擎
qq_43168377的博客
10-30 709
HPLC 2.0是万博思图自主研发的海量图数据可视化分析引擎。 支持百万级原始数据输入，基于图论模型，提供高性能的数据分析与布局呈现，可直观反映出数据的关联关系。 更多经典案例： ...
更轻量级的可视化引擎库
chen_daimaxz的博客
04-28 675
G2可视化引擎库，更轻量级的可视化开发选择 现在项目需要可视化，但是考虑到echarts没g2可视化轻量，所以选择了AntV-G2来作为可视化库。链接如下： https://g2.antv.vision/zh/docs/api/general/chart/ 除了G2 蚂蚁数据可视化还有其他库选择，链接如下 https://antv.vision/zh/ ...
一种多引擎可视化数据流实现方案
元年技术
12-01 595
可视化是简化大数据处理的关键。
数据引擎
大曹的博客
03-06 962
show engines---显示，此数据有的引擎show variables like '%storage_engine%';---当前数据库支持的引擎InnoDB---事物，修改，查询，外键MRG-MYISAM---查询，不能保持一致性，查询比较好MEMORY---内存 性能很好，关机，就没有.        --做一个缓存数据库最好，例如淘宝，第一个用户查询在硬盘里查找，查找到，存在缓存数据...
python数据可视化网页
最新发布
05-22
Python有很多数据可视化的库，例如Matplotlib、Seaborn、Plotly等等。如果你想要将数据可视化成网页形式，可以使用Flask、Django等web框架来搭建网页，并将数据可视化的图表嵌入到网页中。 以下是一个使用Flask搭建Python数据可视化网页的示例代码： ```python from flask import Flask, render_template import matplotlib.pyplot as plt import io import base64 app = Flask(__name__) @app.route('/') def index(): # 生成一个简单的折线图 x = [1, 2, 3, 4, 5] y = [1, 4, 9, 16, 25] plt.plot(x, y) plt.title('My Plot') plt.xlabel('X Label') plt.ylabel('Y Label') # 将图表转换成base64编码的字符串 img = io.BytesIO() plt.savefig(img, format='png') img.seek(0) plot_url = base64.b64encode(img.getvalue()).decode() # 渲染模板并将图表嵌入到网页中 return render_template('index.html', plot_url=plot_url) if __name__ == '__main__': app.run(debug=True) ``` 在上面的代码中，我们首先生成一个简单的折线图，然后将图表转换成base64编码的字符串。接着，我们使用Flask的render_template函数将图表嵌入到网页中。在模板文件(index.html)中，我们可以使用<img>标签将图表显示出来： ```html <!DOCTYPE html> <html> <head> <title>My Page</title> </head> <body> <h1>Welcome to my page!</h1> <img src="data:image/png;base64,{{ plot_url }}" alt="My Plot"> </body> </html> ``` 在上面的模板文件中，我们使用了Flask的模板引擎来动态地将图表的base64编码字符串插入到<img>标签的src属性中。这样，当用户访问网页时，就会看到生成的图表。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值