Question

软件前端可视化是什么？

Answer 1

前端可视化就是将数据以更直观的图表展现在网页中，方便用户查看和决策，目前针对前端可视化，可用的框架非常多，下面我简单介绍几个不错的前端可视化框架，感兴趣的朋友可以自己尝试一下：

ECharts.js

这是百度自己推出的一个前端可视化框架，可以很流畅的运行在PC和移动设备上，制图种类繁多，交互性也非常好，下面我简单介绍一下这个框架的使用：

1.首先，引入ECharts.js库，这里我们直接远程src引入就行，创建一个html文档，定义一个div容器，后面需要通过JSAPI将图表引入这个div容器，基本代码如下，非常简单：

2.接着我们就可以在上面的script标签中引入图表了，测试代码如下，一个非常简单的柱状图，官方示例程序，每个参数都解释的非常清楚：

保存这个html文件，用浏览器打开，效果如下，已经成功绘制出我们需要的图表：

3.更多图表和代码示例的话，可以参考一下官网教程资料，介绍的非常详细，每个示例都可以在线编辑和运行，非常方便：

Highcharts.js

这也是一个非常不错的前端可视化框架，完美支持PC端和移动端，制图种类也非常多，包括常见的散点图、柱状图、饼图等，下面我简单介绍一下这个框架的使用：

1.首先，引入Highcharts.js库，这个也直接远程引入就行，基本思路和echarts一样，也需要创建一个div容器用于放置图表，代码如下，非常简单：

2.接着就是通过JSAPI引入图表，测试代码如下，一个非常简单的组装图，官方的一个小示例，参数解释的非常详细：

保存这个html文件，用浏览器打开后的效果如下，看着还是非常不错的：

3.更多图表示例的话，也直接参考官方文档就行，每个参数都介绍的非常详细，代码也可以直接在线编辑，效果非常不错：

D3.js

这是一个非常强大的前端可视化框架，组件和属性众多，制图种类琳琅满目，几乎可以绘制各种意想不到的图表，下面我简单介绍一下这个框架的使用：

1.首先，引入D3.js库，这个也直接远程引入就行，测试代码如下，非常简单，这里就不需要创建div容器了：

2.接着就是使用D3.js的各种组件和属性绘图，这里都是函数式的编程，相比较前面2个框架来说，使用起来具有一定难度，需要一定的JS基础：

程序运行效果如下，一个堆叠的柱状图：

3.这里更多示例的话，也直接参考GitHub官网就行，各种图标都介绍的非常详细，源代码也可以直接下载到本地：

至此，我们就介绍完了这3个前端可视化框架。总的来说，这3个框架都非常不错，前两个框架使用起来比较简单，也容易掌握，后面D3使用起来具有一定难度，但是功能非常强大，当然，还有许多其他前端可视化框架，像Leaflet，Sigma.js等，也都非常不错，感兴趣的话，可以搜一下，希望以上分享的内容能对你有所帮助吧，也欢迎大家评论、留言进行补充。