首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    盘点10款超好用的数据可视化工具

    Tableau不仅可以制作图表、图形还可以绘制地图,用户可以直接将数据拖拽到系统中,不仅支持个人访问,还可以进行团队协作同步完成数据图表绘制。...创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。...4、D3.js D3(Data Driven Documents)是支持SVG渲染的另一种JavaScript库。...开发者刚开始学习D3.js时会感到很复杂,但是D3.js功能强大,非常灵活,值得开发者深入学习研究。...它可以使数据集载入、复制、粘贴、拖拽、删除与一体,并且允许我们定制化视图和层次。 Raw基于非常流行的D3.js库开发,支持很多图表类型,例如泡泡图、映射图、环图等。

    7K11

    从0到1设计通用数据大屏搭建平台

    二、快速了解可视化大屏2.1 什么是数据可视化从技术层面上来讲,最直观的就是前端可视化框架:Echart、Antv、Chart.js、D3.js、Vega 等,这些库都能帮我们快速把数据转换成各种形式的可视化图表...三、设计思路3.1 技术选型前端框架:React 全家桶(个人习惯)可视化框架:Echarts\DataV-React (封装度高,json结构的配置项易拓展) D3.js(可视化元素粒度小、定制能力强...)拖拽插件:dnd-kit (满足树状结构视图的跨组件拖拽)布局插件:React-Grid-Layout(网格自由布局,修改源码,支持多个方向的拖拽,自由布局、锁定缩放比等)3.2 架构设计下图是我们搭建平台的整体架构设计...3、拖拽器实现背景:React-Grid-Layout 拖拽插件不支持自由布局和组件不同纬度拖拽:解决方案:通过分析源码,对不同纬度的拖拽事件以及拖拽目标碰撞事件进行了重写,并且也拓展了锁定宽高比、旋转透明度等功能...五、效果预览六、总结本文通过可视化页面搭建、no/low code 平台、Schema 动态表单等技术思想来分析讲解了如何去设计开发一个通用的数据大屏搭建平台。

    3.3K40

    从零设计可视化大屏搭建引擎

    按照我一向的写作风格, 我会在下面列出文章的大纲,以便大家有选择且高效率的阅读和学习: 快速了解数据可视化 如何设计通用的大屏搭建引擎 大屏搭建引擎核心功能实现 拖拽器实现 物料中心设计 动态渲染器实现...快速了解数据可视化 说到数据可视化, 想必大家多多少少稍接触过, 从技术层面谈, 最直观的就是前端可视化框架, 比如: echart antv Chart.js D3.js Vega 这些库都能帮我们轻松制作可视化图表...e.target.style.transform = `translate(${e.beforeTranslate[0]}px, ${e.beforeTranslate[1]}px)`; // 自定义的拖拽结束逻辑...id}`} /> } export default memo(ChartComponent) 以上就是我们的基础物料的实现模式, 可视化组件采用了g2, 当然大家也可以使用熟悉的echart, D3...不同物料既有通用的 props , 也有专有的 props, 取决于我们如何定义物料的Schema。

    1.3K40

    Web 开发会用到的20款优秀的开源工具

    Ember Chart Ember Charts 是一个免费开源的图表库,它基于 D3.js 和 Ember.js 这两个库构建,包括时间轴,进度条,饼形图,散形图,很容易扩展和修改,这些开箱即用的特性使得这些表格组件能够轻松呈现我们的想法...Sir Trevor Sir Trevor 是一个开源的网站富文本编辑器,需要去想象内容会如何显示,他只用了 JSON 和 Markdown 并且不用 HTML 存储任何东西,这个编辑器用块进行内容存储...这个程序可以使数据集载入,复制,粘贴,拖拽,删除,允许我们客制化视图和层次。 Raw 个基于流行的D3.js,支持很多种表格类型,例如泡泡图,映射图,环形图等。...Monsta FTP Monsta FTP 是一个开源的 PHP/Ajax 云服务,可以让在你的浏览器中实现 FTP 文件管理功能,你可以往你的浏览器中拖拽文件,然后就看到他们上传来,像魔术一样。...他不限制你用一种语言运行整个测试,所以你可以用一种语言开始,用另一种结束(比如 JS & PHP 代码作为相同的测试)。

    1.6K00

    利用d3.js对QQ群资料进行大数据可视化分析

    d3.js是一个近年来推出的基于javascript的数据展示库,全称为Data Driven Document, 在浏览器数据展示领域的地位类似于通用js框架里的jQuery。...d3.js的官网是d3js.org,大家可以在上面看到很多例子和应用。d3.js也是图形数据库neo4j所内置的数据展示工具。...d3.js支持多种数据格式,比如JSON,XML,CSV,HTML等,因为PHP的数组可以很简单的转换为JSON格式,所以我选择用PHP写API来获取JSON数据。...关于d3.js的force布局,在官网有详细的API和不少例子,这里我就不贴代码了。...在图上节点是可以拖拽的,拖拽后会固定在你释放的地方。我们把几个群稍微拖的分开一点,关系就一目了然了 ? 这个时候我们可以看到在目标的QQ群里也有很多共同QQ号,比如有些QQ号同时加入了2,3个群。

    4K70

    从零开发可视化大屏制作平台

    主流可视化图表库技术选型 目前笔者调研的已知主流可视化库有: echart 一个基于 JavaScript 的老牌开源可视化图表库 D3.js 一个数据驱动的可视化库, 可以不需要其他任何框架独立运行在现代浏览器中...大屏编辑器设计思路 在上面的分析中我们知道一个大屏编辑器需要有个编辑器核心, 主要包含以下部分: 组件库 拖拽(自由拖拽, 参考线, 自动提示) 画布渲染器 属性编辑器 如下图所示: ?...组件拖拽可以采用市面已有的Dragable等插件, 也可以采用H5-Dooring的智能网格拖拽. 这里笔者选择自由拖拽来实现....具体拖拽呈现流程如下: ?...具体拖拽流程就是: 使用H5 dragable API拖拽左侧组件(component data)进入目标容器(targetBox) 监听拖拽结束事件拿到拖拽事件传递的data来渲染真实的可视化组件 可视化组件挂载

    2K10

    如何实现 VSCode 编辑器窗口边界拖拽类似功能

    边界拖拽调整窗口大小功能是一个很常见的功能,比如浏览器、编辑器等很多场景都有应用,这种功能不仅提高了用户体验,也增强了应用的灵活性。...实现边界拖拽调整窗口大小功能,主要是通过鼠标按下、移动、松开事件来实现的,主要思路如下: 在 mousedown 事件中,我们记录下鼠标的初始位置和元素的初始宽度。...同时,我们还需要根据鼠标位置的变化,动态更新鼠标样式,以提示用户当前的拖拽状态。 在 mouseup 事件中,我们清除之前设置的事件监听器,并恢复鼠标样式。...为了鼠标移动到可拖拽边界时显示一条蓝色的线,但是又不想改变元素的宽度,所以 resize-bar 元素的使用了 position: absolute,并且设置了 translateX(-50%) 来让其居中显示...正是因为第二点的实现方式,使得在边界线左右两侧都能拖拽,这一点是优于 VSCode 的,因为 VSCode 只能在左侧拖拽

    22210
    领券