【 🧪 Front end laboratory] front end data visualization report - 03 - industry achievements

Dawnlck is in the Nuggets 2021-02-23 16:10:50
end laboratory end data visualization

Because of the length of this report , It's divided into three pieces , This is the third part , Display some data visualization achievements at home and abroad .

 Data visualization - Product distribution

Here's a list of products that you're familiar with , Domestic, for example Echarts and AntV, Overseas, for example D3 as well as Highcharts.

One 、 Domestic visualization products

1. AntV

AntV Ant group is a new generation of data visualization solutions , Realize data visualization based on the idea of interactive syntax , Aimed at “ Bring data to life ”. Its design principles come from AntDesign, follow “ accuracy > Clear > It works > beautiful ” The four core principles of .

At the beginning ,AntV Or only G2 Prop up the facade , Now? AntV There are already... In the big family F2( Mobile chart Library )、G6( Figure Visualization )、X6( Graph editing and Application )、L7( Visualization of geographic information data )、AVA( Intelligent data visualization analysis )

AntV - Product matrix

2. ECharts

Echarts It was first born in 2012 Year of 8 month , Experienced 2013、2014、2016、2018、2020 Five changes , At present, it comes to Echarts5.0 The stage of .

Echarts - 5.0 - Modules and features

Echarts - development history

Two 、 Foreign visualization products

1. HighCharts

Highcharts Series software is produced by professional chart software manufacturer HIGHSOFT Developed , Simple number technology is responsible for operation in China , The first version is in 2009 Published in , So far there have been 3 A mature chart software and related cloud services . There are many customers all over the world , Include 72 Global 100 Strong enterprise , Well known enterprises such as facebook、twitter、 Microsoft and others are using .

At present, the product is divided into four parts :

Product matrix explain
Highcharts Convenient and fast pure JavaScript Interactive charts
Highcharts Stock Easy and quick to create stock chart 、 Big data timeline charts
Highcharts Maps first-class HTML5 Map components , Support RIH , touch 、 gestures
Highcharts gantt Easy to use JavaScript Ganttuku

As of the time of this article ,Highcharts The latest version of is 9.0.1, It almost keeps the iteration speed of a large version a year .

9.0 Mainly finished right Typescript The adaptation of , Yes series and indicators And so on ES6 class The inheritance reconstruction of , Others include date selectors 、3D Area calculation and other optimization .

8.0 Added some new chart types , Strengthen the narrative ability of dynamic chart .

7.0 Some topological graphs such as Sangji graph are added 、 Timeline 、3D Pyramids and funnels 、 Bubble chart 、 Network topology , Perfect some details of Gantt Chart .

2. amCharts

amCharts Founded in 2004 year , It's still not open source , The chart library is very concise and beautiful on some types of charts , Such as Timeline and Sanguitu .

amCharts Divided into four parts ,Charts、Map、TimeLine as well as Editor( Strictly speaking Editor It's not a classification ). At present, it is less used in China , Overseas are also some big customers, such as Microsoft 、 Apple 、NASA Waiting to use their products .

3. D3.js

D3.js It's a Javascript library , Used to process documents based on data .

D3 Provides a declarative approach for developers , You can operate on any set of nodes .

d3.selectAll('p').style('color', function (d, i) {
return i % 2 ? '#fff' : '#eee';
 Copy code 

Use D3.js, Many excellent data visualization works have been produced , It provides a lot of capabilities for developers to customize for data visualization .

3、 ... and 、 Little contrast

API - Display

Reference link

  1. AntV - Ant data visualization
  2. Echarts - Apache - One is based on JavaScript Open source visualization chart Library
  3. Echarts - 《ECharts A brief history of technological development 》
  4. Highcharts - Make data visualization easier
  5. amCharts - JavaScript Charts & Maps
  6. d3js
  7. chart.js
  8. Gao de - loca
  9. Gao de - mapLab
  10. Baidu - MapV ( It's been a long time since there was an iterative version )
  11. Microsoft - SandDance - Unit data visualization
  12. BizChart - Visualization solution in enterprise background
  13. Flourish - Beautiful and easy data visualization and storytelling
  14. MIT - sigma.js(2017)
  15. 《 octopus - 30 A data visualization tool worth recommending (2020 Annual update )》
本文为[Dawnlck is in the Nuggets]所创,转载请带上原文链接,感谢

  1. RxHttp - 轻量级、可扩展、易使用、完美兼容MVVM、MVC架构的网络封装类库
  2. Rxhttp - lightweight, extensible, easy to use, perfectly compatible with MVVM, MVC architecture network encapsulation class library
  3. Rxhttp - lightweight, extensible, easy to use, perfectly compatible with MVVM, MVC architecture network encapsulation class library
  4. 前端面试常考题:JS垃圾回收机制
  5. Frequently asked questions in front end interview: JS garbage collection mechanism
  6. Rxhttp - lightweight, extensible, easy to use, perfectly compatible with MVVM, MVC architecture network encapsulation class library
  7. Java之HTTP网络编程(一):TCP/SSL网页下载
  8. HTTP network programming in Java (1): TCP / SSL web page download
  9. Java之HTTP网络编程(一):TCP/SSL网页下载
  10. HTTP network programming in Java (1): TCP / SSL web page download
  11. 使用vite搭建vue项目
  12. 在组件中展示pdf文件:vue-pdf (由于未找到方法滑动加载下一页,只能点击加载下一页pdf文件)
  13. 在 vue 中通过 express 连接数据库
  14. Using vite to build Vue project
  15. Display PDF file in component: Vue pdf
  16. Connecting database through express in Vue
  17. 2021届秋招哈啰出行前端面经(一面)
  18. vue使用sdk进行七牛云上传
  19. Javascript性能优化【内联缓存】 V8引擎特性
  20. Small true wireless smart headset evaluation: put intelligence into the ear
  21. The front end experience of the 2021 autumn recruitment
  22. Vue uses SDK to upload Qi Niu cloud
  23. 深入理解 Web 协议 (三):HTTP 2
  24. dhtmlxGantt如何重新排序任务
  25. JavaScript performance optimization [inline cache] V8 engine features
  26. 深入理解 Web 协议 (三):HTTP 2
  27. Deep understanding of Web protocol (3): http 2
  28. 深入理解 Web 协议 (三):HTTP 2
  29. How dhtmlxgantt reorders tasks
  30. 深入理解 Web 协议 (三):HTTP 2
  31. JavaScriptBOM操作
  32. JavaScriptBOM操作
  33. Deep understanding of Web protocol (3): http 2
  34. Deep understanding of Web protocol (3): http 2
  35. dhtmlxGantt甘特图重新排序任视频教程
  36. vue实现七牛云上传图片功能
  37. vue.js环境配置步骤及npm run dev报错解决方案
  38. Deep understanding of Web protocol (3): http 2
  39. JavaScript BOM operation
  40. JavaScript BOM operation
  41. Dhtmlxgantt reordering video tutorial
  42. Vue to achieve seven cattle cloud upload image function
  43. vue.js Environment configuration steps and NPM run dev error reporting solution
  44. 什么是HTTPS以及如何实施HTTPS?
  45. vue使用sdk进行七牛上传
  46. JavaScript 邮箱验证 - 正则验证
  47. Codeless development platform cloud watch sets off a "new revolution" in enterprise Digitalization
  48. Codeless development of cloud watch for enterprise digital solution
  49. What is HTTPS and how to implement it?
  50. Vue uses SDK to upload seven cows
  51. JavaScript mailbox verification - regular verification
  52. JavaScriptBOM操作
  53. JavaScript BOM operation
  54. How to create a new NPM package and publish it to the NPM community
  55. vue --tinymce 解决上传图片的方法
  56. Vue development
  57. A simple solution for vite to batch introduce SVG symbol
  58. Building 3D rendering engine from scratch with JS (2)
  59. Vue -- tinymece solution to upload pictures
  60. Common configuration of nginx