前端图表插件有哪些

小编 • 2023年1月16日下午10:37 • 科技 • 阅读 1231

前端图表插件有：1、Echarts；2、Highcharts；3、G2（antV）；4、D3。ECharts缩写来自Enterprise Charts，是百度推出的一款开源的商业级数据图表，它最初是为了满足百度公司商业体系里各种业务系统（如凤巢、广告管家等等）的报表需求。

1、Echarts

ECharts，缩写来自Enterprise Charts，是百度推出的一款开源的，商业级数据图表，它最初是为了满足百度公司商业体系里各种业务系统（如凤巢、广告管家等等）的报表需求。

ECharts3.8版本以上（包括3.8）可以支持SVG和Canvas绘图，3.8版本以下只能支持Canvas，且两种方式都只能导出jpg，png格式的图片，目前还无法导出svg格式图片，上手最简单，定制化程度较低。

2、Highcharts

Highcharts和Echarts是一类东西，打个比方说：Echarts相当于中国的WPS，而Highcharts相当于微软office；但跟D3维度不同。假如前面两个能解决你的需求，那么就可以先不考虑D3。英语好Highcharts，英语不好选Echarts

3、G2（antV）

G2(The Grammar Of Graphics) 是一个由纯 javascript 编写、强大的语义化图表生成工具，它提供了一整套图形语法，可以让用户通过简单的语法搭建出无数种图表，并且集成了大量的统计工具，支持多种坐标系绘制，可以让用户自由得定制图表，是为大数据时代而准备的强大的可视化工具。G2可以支持Canvas和SVG绘图，还未提供导出图片的接口，需要自行实现导出图片，定制化程度和上手速度处于D3和Echarts之间。

4、D3

该库更接近底层，与 g2、echarts 不同，d3 能直接操作 svg，所以拥有极大的自由度，几乎可以实现任何 2d 的设计需求。正如其名 Data Driven Documents，其本质是将数据与 DOM 绑定，并将数据映射至 DOM 属性上(这时视觉通道、比例尺转换等理论就可发挥作用喽～)。

D3目前支持SVG和Canvas绘图，而且可以导出png、jpg、svg格式的图片，且定制化程度是三者中较高的，但上手较难。

延伸阅读：

什么是前端？

前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，合适的动效设计，给用户带来极高的用户体验。

前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，最新的高级版本HTML5、CSS3，以及SVG等。

这三个是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚、弄明白，这样在开发的过程中才会得心应手。