5大商用HTML5 交互性图表库和Echarts实用性对比,掌握即可应对多种业务需求

原创|对比评测|编辑:status|2020-10-23 11:16:17.090|阅读 145 次

概述:【普通图表篇】兼容 IE6+、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库有哪些?除了图表报表功能组件外地图、K线图、组织结构图、脑图等商业组件怎么选?哪些商用图标库可以不花钱就能使用?看完这篇所有问题你都懂啦!

# 31款JAVA开发必备控件和工具 #

姊妹篇:线性结构图web开发控件 可开发思维导图、UML图、类似Viso的流程图工具

很多公司在做后端业务系统时会遇到多种对图表、业务流程等方面的需求,而随着html5技术的更迭,越来越多的业务需求可以在WEB端实现,并且能够同时满足所有后端开发者的对接需求。

那么本篇我将按照图表功能、功能效果、集成难度和收费情况为大家展现5大商用HTML5 交互性图表库(Highcharts、Anychart、Lightningchart、GoJs、DHTMLX)和Echarts实用性对比。

在线对比直达

  • Highcharts:https://www.highcharts.com.cn/demo/highcharts
  • Anychart:https://www.anychart.com/products/anychart/gallery/
  • Lightningchart:https://www.arction.cn/lightningChart-js
  • GoJs:https://gojs.net/latest/samples/index.html
  • DHTMLX:https://dhtmlx.com/docs/products/docsExplorer/samples.shtml
  • Echarts:https://echarts.apache.org/examples/zh/index.html

安装对比(以Echarts为例)

以上几款HTML交互图标库的安装方式大致相同:

1. 页面引入css、js文件

2. 定义图表库数据(格式都是相似的结构化数据)

3. 绑定dom元素即可加载

一般图表对比(柱状图、饼状图、折线图、散点图)

1. 柱状图

产品 实现效果动图 效果特征
Highcharts

可自定义图表样式,还可以做柱状图嵌套,UI方面体验效果很好
Anychart

柱状图可以做正负值、系列值对比,这是它的绝对亮点
Lightningchart

具有加载动效
GoJs

非常普通,不具备任何优势
DHTMLX

实现效果普通,满足简单业务展示
Echarts

可自定义图表样式、点击事件等,不过UI方面略显呆板、数据绑定略微复杂

2.  饼状图

产品 实现效果动图 效果特征
Highcharts

满足2D、3D饼状图,2D饼状图还有不少扩展
Anychart

满足2D、3D饼状图,2D饼状图还有不少扩展
Lightningchart

效果普通,lightingchart在普通图表上大多只能满足基本需求
GoJs

GoJs的饼图只有2D的,但是数据可以直接在图表上互动
DHTMLX

实现效果普通,满足简单业务展示
Echarts

Echarts的饼图只有2D效果,但是可自定义的花样非常多,一般需求值得推荐

3.  折线图

产品 实现效果动图 效果特征
Highcharts

除了普通的点线图、折线图以外,highcharts还可以在折线图中标注内容
Anychart

anychart在折线图中可以对阶段范围数据做可视化区别
Lightningchart

lightningchart的折线图可以动态加载数据,比如对CPU负载等短时数据根据你的也无需求动态加载,比较方便
GoJs

GoJs折线图比较中规中矩,满足业务需求
DHTMLX

dhtmlx折线图实现效果普通,满足简单业务展示
Echarts

Echarts的折线图同样具备多种表达方式,而且可自定义的花样非常多,一般需求值得推荐

4.  散点图和气泡图

产品 实现效果动图 效果特征
Anychart

Anychart的散点图和气泡图可以根据坐标轴区间散列,属于常态
Highcharts

在anychart的基础上,highcharts具备更多的气泡图样式
Lightningchart

lightningchart不具备气泡图,散点图和折线图一样可以动态加载数据,比如对CPU负载等短时数据根据你的也无需求动态加载,比较方便
GoJs

GoJs散点图更像气泡图,可以根据多重维度展示数据,动态效果很不错
DHTMLX

dhtmlx散列图效果一般,和整个控件风格保持了一致
Echarts

Echarts的散列图和气泡图不仅具备上述所有效果,而且还有基于地图、热力图等方面的变形

收费情况

产品 价格 说明
Echarts 免费开源 功能很丰富,不介意开源产品的项目推荐
Highcharts 商业收费 对于个人网站,学校网站和非盈利机构免费
Anychart 商业收费 多种收费模式,最低49美金
Lightningcharts 商业收费 多种收费模式,最低399美金,有社区免费版
DHTMLX
商业收费
GoJs 商业收费 多种收费模式,个人和小微企业有特别待遇



标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,尊重他人劳动成果

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
在线咨询
联系我们
TOP
在线客服系统
live chat