如何挑选数据可视化框架及平台 - 前端篇

慈云数据 2023-03-11 行业资讯 976 13

它与 API 非常相似。 许多公司免费使用它,但实际上它们有许多独特的功能。 最突出的是-gl,可以实现三维图表和地球的显示。 其他开源库基本没有,其他商业图表都是基于SVG的,只能模仿3D效果。 只有-gl基于WebGL实现真3D,可配置光照、材质、阴影等,拥有专属后期特效。

-gl主要是因为我第一次听说的时候他写了自己的WebGL框架(以前叫qtek)。 作为一个WebGL新手,一直不明白为什么要自己抄一个。 这件事我是后来才知道的。 框架并不简单。

学过3D图形后,知道常见的渲染架构有两种,一种是前向渲染,一种是延迟渲染。 一般来说,前向渲染更容易实现,但不能支持大量光源,延迟渲染实现成本更高。 高,但支持大量光源,适合做后期特效,所以包括Unity和4在内的主流游戏引擎主要使用延迟渲染,只有在低端设备上才切换到前向渲染。

但是,如果你四处搜索,你会发现在WebGL领域,它是唯一支持延迟渲染的,包括Three.js(尝试过但放弃了),.js,还有你闻所未闻的各种WebGL引擎. 光源的数量将受到限制,例如最多 4 个。

除了延迟渲染的独特亮点外,它还内置了Bloom、SSAO、SSR等特效,并支持动画、GLTF等,是为数不多的功能齐全的WebGL框架之一。

正是因为对3D图形的深入理解,-gl才能产生远超其他图表库的效果。 然而,这个巨大的门槛既是优势也是劣势。 -gl最大的问题是,懂WebGL的前端工程师太少,再加上使用自研渲染引擎导致门槛较高。 这个项目很久以来只有一个人提交过。 最近给地球添加了一个小特效,成为了第二个贡献榜。

作为公司内部的开源产品,在功能和文档方面已经达到了商业产品的水平。 还有主题编辑和社区贡献的大量案例,7年来团队一直在投稿,不易。 计划中的新5.0版本将在动画、数据处理和性能上有明显的提升,值得期待。

Vega - 图表库也可以是低代码的

google 前端 框架_php前端基础知识 前端框架_如何正确挑选网站前端框架

Vega 和 D3 都来自华盛顿大学的数据实验室。 该机构专注于数据交互的研究,Vega的目标是做数据可视化配置语法。 你可以基于它准备各种想要的元素,比如axis,等。/的图表虽然主要依赖一个配置项,但是仍然需要依赖代码来加载数据,而Vega可以完成所有图表相关的开发只有JSON,包括数据加载、转换、交互等。

例如下面的例子加载一个csv文件,然后添加一个计算字段,这个字段取自原始数据中两个字段的差异。 这里的数据加载和处理需要在其他图表库中编写实现:

{
  "data": {"url": "data/seattle-weather.csv"},
  "transform": [
    {"calculate": "datum.temp_max - datum.temp_min", "as": "temp_range"}
  ]
}

但是因为它追求的是完全的可配置性,所以要实现一个最基本的图表需要大量的配置。 比如最简单的直方图需要95行的配置,很容易吓跑不耐烦的初学者,于是Vega又做了一个。 高级语法Vega-Lite,但同样更注重灵活性而不是易用性,默认不提供交互功能。 如果不配置,鼠标移到图表上没有反应,让人误以为是静态图片。 ,所以整体上对初学者并不友好,无法立即制作出完整可用的图表。

Vega 方法的独特优势在于它可以促进程序生成。 例如,Vega 团队开发了它。 它的原理是动态生成Vega配置,所以很容易成为其他语言的前端图表生成工具。

google 前端 框架_php前端基础知识 前端框架_如何正确挑选网站前端框架

单从视觉语法的角度来看,Vega 做得很好,提供了很多新的思路。 比如它不像D3那么底层,但是它提供了一个更容易上手的可视化领域的基础设置,让即使不会的人也能使用它,非常适合分析人员使用. 但是,Vega 也有明显的缺点,我们将在本文最后说明。

PS Vega的图表加载、转换、展示、交互的思路只需要JSON配置,这和我们的开源项目amis非常相似,无需编写即可完成中端页面的开发。 G2/F2 - The Of 的追随者

google 前端 框架_php前端基础知识 前端框架_如何正确挑选网站前端框架

G2由支付宝前端团队开发。 虽然当时已经很成熟了,但是支付宝还是选择了自己做一个,这就是G2的前身。 其API与支付宝基本相似。 后来笔者看了《The Of》这本书,调整了方向,开始按照这本书的思路开发G2。 这个G2的名字就是本书书名中的两个G。

受本书影响的可视化库有很多。 上面提到的Vega-Lite在作者的论文中提到了很多。 像 G2 一样,也有参考那本书的图表部分,但不要阅读它。 这是微软的一个项目。 实际上只有一个人在开发,投稿数量很不稳定。 笔者还忙于另一个比较知名的项目react-dnd,所以以后大概率会被弃用。

在《The Of》中,作者主要借鉴了面向对象的思想,将图表拆分成数据源、数据转换、坐标系、图形等诸多组件,通过把它们组装起来,从技术角度来说并不新鲜,但是这本书在数学上进行了结合和分析,看起来很高级。

奇怪的图表.().('genre*sold'); in G2 来自那本书。 这里的*不是乘法,而是作者自己定义的一个运算符,也就是合并的意思。 支持运算符重载,所以这里只能使用字符串,类型信息丢失,很容易在不知情的情况下拼错。

与同类图表库相比,G2的定位更接近Vega,即比直接使用的图表库低一层。 对于想用的人来说,会觉得上手成本比较高,所以后来的G2也提供了更加简化的绘图,专注于常用的图表。

我从来没有真正使用过这个项目。 我在文档和示例方面做了很多工作。 已经达到了商业项目的水平,可以满足大部分需求,但是从提交历史来看,有点不稳定。 F2在2019年停滞了好几个月,G2的提交数量也明显减少,最近六个月才回升,可能是内部重构的原因。

值得一提的是,蚂蚁V团队也开发了很多方向,比如关系图G6/X6、图L7、自动选图AVA等,但这些项目大多只有一个人,团队的精力可能是一个有点散。

Chart.js - 热门促销示例

如何正确挑选网站前端框架_php前端基础知识 前端框架_google 前端 框架

之前我对 Chart.js 库了解不多。 几年前我第一次发现它时,它的星星数量非常多。 现在star数49.3k,在npm上的周下载量已经达到百万。 它与D3处于同一数量级,可能是最流行的前端图表库。

php前端基础知识 前端框架_google 前端 框架_如何正确挑选网站前端框架

既然如此火爆,它的技术情况如何呢? 该项目最早投稿时间为2013年,近7年投稿从未中断。 但是整个项目的代码量只有1w多行。 它的图表类型和可配置项很少。 总体来说,比/差太多了。 看了半天,真的不明白为什么这么受欢迎。 可能反映出大部分人对图表的要求并不高。 可以展示几个场景图,一点交互和动画就够了。

在我看来,唯一值得关注的就是它的宣传推广能力。 它是如何变得如此受欢迎的? 仅仅是个好名字吗?

- 小镇中的世界级组件

如何正确挑选网站前端框架_php前端基础知识 前端框架_google 前端 框架

接下来介绍几个商业图表库。 首先,它是最知名的商业图表库,从中也可以看出:

google 前端 框架_如何正确挑选网站前端框架_php前端基础知识 前端框架

多家商业图书馆的关注

如果不去研究,很多人可能会认为它是一家美国公司,但它其实诞生在挪威一个只有2000人的美丽小镇,而且至今还在这里。 有山有水如世外桃源:

如何正确挑选网站前端框架_google 前端 框架_php前端基础知识 前端框架

维克我松,

2006 年,创始人只是想在他的主页上添加一个图表。 虽然有/这些Flash商业解决方案,但他看不惯就开始基于SVG/VML开发。 也许他是第一个这样做的人。 之所以后来居上,很可能是因为使用SVG/VML最大的优势就是方便前端使用,但是之前基于Flash的解决方案和沟通上的麻烦往往会导致整个开发page with Flash,比较贵,所以后来/也转向了SVG/VML方案。

十四年过去了,它的创始人几乎每天都在提交代码。 这个项目的很多贡献者都是同乡的,而且大部分都是他培养的老乡。 . .

虽然是开源的,但是商业使用是需要收费的。 很多人看到要花钱并不看不起,但实际上,专攻这一领域的商业公司往往更有优势。 D3 最好的开源图表库是一家商业公司的产品。

作为商业公司,如果有收入,可以雇佣很多人一起发展。 目前全公司有36人。 这从历史上就可以看出来。 它有超过14人贡献了超过1w行代码,其中大部分是连续提交超过5年,这是所有其他免费开源项目不可能做到的。 比如最火的D3,主要是一个人贡献的,很可能因为其他事情忙得没空维护,即使是大公司也是如此。 不管公司有多大,这个开源项目都不是公司的主营业务,所以最多只会有3-4个全职开发人员。 多了就有点倒闭了。 很容易因为团队调整、人员流失而导致项目受损。 停滞不前,我也听说过有人炒币发了大财,然后就辞职了。

如果你的项目很重要,预计未来要维护十年,还是选择成熟的商业软件比较稳妥,但我觉得它的默认样式很丑,而且这么多年都没有改过。 可能是小镇太难找设计师了。

- 低沉钱的图表库

google 前端 框架_php前端基础知识 前端框架_如何正确挑选网站前端框架

如果你想使用商业软件但觉得它太难看,它是一个不错的选择。 也是开源的,但是商业使用要收费。 它的整体设计更漂亮,但其影响力远不及此。 就连网上的Star也只有248,还不如很多个人发布的玩具项目。

但是在国内一个卖控件的网站上,.

它成立于2003年,是这里唯一的一家美国公司。 最早的版本是 Flash。 2007年也用在了APEX产品上,整体代码量达到了30万行,生成的定义有3万行。 它在数量上碾压其他免费开源库。 从这一点,我们也可以看出商用产品在人力投入方面的优势。 但由于开发时间较长,其组件系统仍沿用。 现在应该没有人知道它是什么了。 (要知道,你已经不年轻了……),但在当时是个不错的选择。

除了图表库,它还开源了底层图形库,支持SVG/VML的输出,同样,这个库是BSD协议下的,Star数是项目的3.7倍。

- 高中生的逆袭

如何正确挑选网站前端框架_google 前端 框架_php前端基础知识 前端框架

来自印度,其创始人的父亲是一名网页设计师,因此很早就接触到了互联网。 16 岁时,他会用 Excel 做高中作业。 在使用过程中,他觉得Excel中的图表不太好用。 ,于是贡献了一篇文章如何正确挑选网站前端框架,提出Flash不仅可以做小广告,还可以实现交互式图表的想法。 这篇文章给他带来了1500$的零用钱,而普通高中生拿到的零用钱大多会迅速挥霍在朋友圈,17岁(2002年)拿着钱成立公司,开始开发Flash基于图表库。 但是,高中辍学创业,没有投资人,也不是一件容易的事。 我会相信一个还没有成年的孩子。 一个人在家发展了三年,我招了第一个人。 早期只在网上卖,因为网上不容易发现你是小孩。 如果你知道了,你肯定不敢买。 幸运的是,在图表方面的需求非常旺盛,所以公司不断壮大,图表库不仅卖给了很多公司,还卖给了美国联邦政府如何正确挑选网站前端框架,连美国总统都在用。

没有开源,使用底层图形库。 早年有提供开源版本,后来不再提供了。 全公司65人,人多优势还是很明显的。 图表数量超过100个,文档也很详细。 All 代码提供了React、Vue等十几个框架下的示例,还提供了示例和导出PDF等功能。

另外还有一个相关的图表库是开源的,是2018年新发布的,不清楚他们之间是什么关系。 它可能是赞助商,因此文件已被刊登广告。

google 前端 框架_php前端基础知识 前端框架_如何正确挑选网站前端框架

然而,这家公司在今年 3 月被软件公司 Idera 收购。 疫情期间我把公司卖了。 希望不是因为困难。 出售后不久,印度宣布封锁 21 天。 大公司应该可以。 更容易度过这场危机。

值得一提的是,Idera 拥有众多知名的开发工具和库,例如曾经压倒微软的 /C++ 开发工具,早年震惊前端界的 Ext JS,必装扩展,大名鼎鼎的 CI tool Cl, good 一个可以使用的富文本编辑器。 - 唯一免费用于商业用途的商业图表库

如何正确挑选网站前端框架_google 前端 框架_php前端基础知识 前端框架

它也来自一个小国家。 其总部位于立陶宛。 一开始只做地图和图表,后来做饼图和折线图。 应该是这里最小的商业公司了。 整个团队只有7个人,其中4-5人左右,因为人少,所以功能比其他几个商业库要少,比如不支持vml(但现在IE8没人用),可能是因为觉得做不到,所以采取了不同的经营策略,唯一的商业用途是免费的,去掉logo只需要付费。 这个策略似乎运作良好。 它的搜索量在这些商业数据库中排名第二,使用的网站数量仅次于它。

Chart - 图表库云服务

php前端基础知识 前端框架_如何正确挑选网站前端框架_google 前端 框架

它是2008年推出的,做的很早。 虽然在国内没有人用,但是在国外用的很多。 根据一项数据分析,它是最受欢迎的图表库,其在网站中的使用量是网站的两倍。

有两个版本,一个是通过链接生成图表图片,一个是外链图表库。

通过链接生成图表图片的做法在十多年前就很普遍了。 比如在性能监控领域应用多年。 甚至现在在一些股票网站的k线图中也能看到这种方法。 使用它的主要原因是当时前端技术不成熟,浏览器兼容性差。 使用这种方法,您可以轻松地在所有浏览器中获得一致的显示效果。 这是一个例子:

google 前端 框架_如何正确挑选网站前端框架_php前端基础知识 前端框架

还有一个好处是使用方便,可以通过拼字符串生成图表,可以很方便的放入邮件中,但是这种方法的缺陷也很明显,就是不支持交互,你不能鼠标悬停查看具体数值,尤其是数据点多的折线图,更是无能为力,2012年宣布放弃这项服务。

魔力象限中排名第三的BI厂商Qlik,依旧是通过生成图片来展示图表。 究其原因,可能是技术发展太早,历史包袱太重,改不了。 这家公司早在1993年就成立了,当时浏览器的始祖刚刚发布,能显示图片是独家技术,浏览器的诞生还要再等两年,所以在那个年代,在浏览器中显示图表的唯一方式就是动态生成图片。

外部链接是目前使用 Chart 的唯一途径。 这样做的好处是可以随时更新。 缺点是文件加载性能依赖CDN。 这也导致在国内几乎没有人使用,似乎进入了维修状态。 它已在最近几年进行了更新。 非常慢,一年只有2次更新。

php前端基础知识 前端框架_google 前端 框架_如何正确挑选网站前端框架

其他开源图表库

Star数比较高的开源图表库很多。 这是一个简短的总结:

概括

虽然有很多开源图表库,但大部分要么已经被废弃,要么将被废弃。 目前可以使用的只有 Ploty.js、Vega 和 G2。

Vega的背后是一个学术组织。 投资相对稳定,但缺点是可能更注重学术方面的发展。 一些在行业中很重要但没有技术含量的东西不是很关心,比如主题配色、动画、阴影、波纹等,花里胡哨的优先级一定是最低的。 比如动画功能据说是2016年做的,前几天作者说有很多功能他想做。 动画留给我的学生先研究。 所以Vega只推荐内部使用,外部产品还是需要一些花里胡哨的东西。

Ploty.js背后有一家公司专门做这个,代码提交比较稳定。 不过,作为一家商业公司,似乎主要还是靠销售另一种开源的 Dash 产品和咨询服务。 不知道以后会不会对高级图表功能收费。 目前,了解图表库的人并不多,npm 上的下载量也很低。

G2虽然身处大型互联网公司,但实际的人力投入是很难与专门从事这方面的商业公司相提并论的。 G2战队的情况我​​不太了解。 相对来说,社区更强大,依赖用户贡献的例子就差远了。 远超其他图表库,在一定程度上减轻了API的学习成本,几乎全部回复。 没有多少开源库可以做到这一点。

以后会有更好的前端图表库吗? 恐怕不是。 上面提到的许多图表库的成功赶上了技术变革。 从最早的/Flash,到SVG/VML,再到最新的,技术栈的不同使得它们一出来就具有明显的优势。 因此,如果没有新的技术变革,新的图表库很难超越,只能在特定领域有所突破。 目前只能看到浏览器接下来的图形技术变革,虽然不会那么惨,但是和WebGL相比,它的主要优势在于减少了CPU的时间,更好的利用了GPU,更利于后续游戏在浏览器上的表现,但是对于图表来说相比WebGL并没有明显的优势,再加上图表大多是二维的,除非数据点非常多,否则并行渲染的好处不大。

图表库的商业产品不多。 毕竟这个要求很笼统,很难在比赛中做到差异化。 这对客户来说是昂贵的。 为什么不选择最好的呢? 此外,追赶商业品质的开源库的存在可以满足大部分需求,使得商业产品的生存空间有限。

如果选择商用产品,国内最好选择 , , , , 因为目前好像还不支持中文,不过需要注意这些产品的图。 有错误,把某个省当成了国家,用的时候要改。

最终,我们选择了我们的BI产品,因为它的全面功能为我们省去了很多工作。 实践证明,在BI等复杂的图表场景下使用是没有问题的。 通常用户想要我们还不支持的东西。 函数,我们去文档里找,发现是有的。 . . 非常感谢团队多年来的奉献精神。

google 前端 框架_如何正确挑选网站前端框架_php前端基础知识 前端框架

上面提到的图表库都需要开发好才能用于可视化分析。 如果不想开发,可以选择完整的可视化平台。 我们将在下一篇文章中介绍。 如果您有兴趣,请关注。

评论列表

无需编写即可完成中端页面的开发。 G2/F2 - The Of 的追随者G2由支付宝前端团队开发。 虽然当时已经很成熟了,但是支付宝还是选择了自己做一个,这就是G2的前身。 其API与支付宝基本相似。 后来笔者看了《The Of》这本书,调整了
2023-03-14 22:17:20 回复
本的图表需要大量的配置。 比如最简单的直方图需要95行的配置,很容易吓跑不耐烦的初学者,于是Vega又做了一个。 高级语法Vega-Lite,但同样更注重灵活性而不是易用性,默认不提供交互功能。 如
2023-03-15 05:24:56 回复
tool Cl, good 一个可以使用的富文本编辑器。 - 唯一免费用于商业用途的商业图表库它也来自一个小国家。 其总部位于立陶宛。 一开始只做地图和图表,后来做饼图和折线图。 应该是这里最小的商业公司了
2023-03-15 06:30:19 回复
。 比如动画功能据说是2016年做的,前几天作者说有很多功能他想做。 动画留给我的学生先研究。 所以Vega只推荐内部使用,外部产品还是需要一些花里胡哨的东西。Ploty.js背后有一家公司专门做这个,代码提交比较稳定。 不过,作为一家商业公司,似乎主要还是靠销售另一种开源的 Das
2023-03-15 01:44:10 回复
库云服务它是2008年推出的,做的很早。 虽然在国内没有人用,但是在国外用的很多。 根据一项数据分析,它是最受欢迎的图表库,其在网站中的使用量是网站的两倍。有两个版本,一个是通过链接生成图表图片,一个是外链图
2023-03-15 05:07:15 回复
234
代码的Vega 和 D3 都来自华盛顿大学的数据实验室。 该机构专注于数据交互的研究,Vega的目标是做数据可视化配置语法。 你可以基于它准备各种想要的元素,比如axis,等。/的图表虽然主要依赖一
2023-03-14 19:54:59 回复
。Vega - 图表库也可以是低代码的Vega 和 D3 都来自华盛顿大学的数据实验室。 该机构专注于数据交互的研究,Vega的目标是做数据可视化配置语法。 你可以基于它准备各种想要的元素,比如
2023-03-14 20:20:20 回复
大,依赖用户贡献的例子就差远了。 远超其他图表库,在一定程度上减轻了API的学习成本,几乎全部回复。 没有多少开源库可以做到这一点。以后会有更好的前端图表库吗? 恐怕不是
2023-03-15 03:28:55 回复
是项目的3.7倍。- 高中生的逆袭来自印度,其创始人的父亲是一名网页设计师,因此很早就接触到了互联网。 16 岁时,他会用 Excel 做高中作业。 在使用过程中,他觉得Excel中的图表不太好用。 ,于是贡献了一篇文章如何正确挑选网站前端框架,提出Fl
2023-03-15 01:56:39 回复
它与 API 非常相似。 许多公司免费使用它,但实际上它们有许多独特的功能。 最突出的是-gl,可以实现三维图表和地球的显示。 其他开源库基本没有,其他商业图表都是基于SVG的,只能模仿3D效果。 只有-gl基于WebG
2023-03-14 19:53:19 回复
ga的图表加载、转换、展示、交互的思路只需要JSON配置,这和我们的开源项目amis非常相似,无需编写即可完成中端页面的开发。 G2/F2 - The Of 的追随者G2由支付宝前端团队开发。
2023-03-15 05:23:46 回复
同使得它们一出来就具有明显的优势。 因此,如果没有新的技术变革,新的图表库很难超越,只能在特定领域有所突破。 目前只能看到浏览器接下来的图形技术变革,虽然不会那么惨,但是和WebGL相比,它的主要优势在于减少了CPU的时间,更好的利用了GPU,更利于后续游戏在浏览器上的表现,但是对于图表来
2023-03-15 02:39:19 回复
234
业图表库,从中也可以看出:多家商业图书馆的关注如果不去研究,很多人可能会认为它是一家美国公司,但它其实诞生在挪威一个只有2000人的美丽小镇,而且至今还在这里。 有山有水如世外桃源:维克我松
2023-03-14 23:58:25 回复

发表评论:

微信扫一扫加客服

微信扫一扫加客服

微信扫一扫加客服

微信扫一扫加客服