关于数据可视化:如何做数据可视化

37次阅读

共计 4499 个字符，预计需要花费 12 分钟才能阅读完成。

链接什么是数据可视化。

通过上文的材料的查阅以及一些本人的感触，当初大略也搞明确了什么是数据可视化，以及数据可视化的推动过程中存在哪些问题，比方自觉的进行可视化以致迷失了自我，一味的谋求酷炫的成果以致重点内容被弱化···

那么落实到集体，作为一个心愿进入数据可视化畛域的前端开发工程师而言，我应该如何进行可视化方面的学习呢？应该从何做起？

1. AntV
老是说谁不是上来就是一个数据可视化的引擎搜寻呢？我也不例外···通过一顿查阅，我发现蚂蚁家的 AntV 可视化系列做的很不错，为什么说是系列？我先给上个链接：

AntV

如果你关上的网站的话，你会发现它其实蕴含了很多的子项目，包含：

G2：统计图引擎（折线图、桑吉图）
F2：挪动端统计图引擎（折线图、桑吉图）
G6：图可视化引擎（关系图、门路图）
X6：图编辑引擎（可操作的流程图）
L7：空间天文可视化引擎（大多与地图无关）
···

而在这根底之上又衍生出了基于相干引擎的图形案例，造成了诸如 G2 Plot 此类的图形库，并最终被汇聚到了 Ant Design Charts。

2. Apache Echarts

这个库可能晓得的人十分多，并且使用量也是蛮大的，就比方我之前就比拟喜爱用它。

Apache Echarts

3. D3.js

D3.js

D3 (Data-Driven Documents or D3.js) is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, Canvas and HTML. D3 combines powerful visualization and interaction techniques with a data-driven approach to DOM manipulation, giving you the full capabilities of modern browsers and the freedom to design the right visual interface for your data.

值得注意的是当初 D3 反对 SVG、Canvas、HTML，我好像记得之前看它还不反对 Canvas。

4. Three.js

Three.js

JavaScript 3D library

The aim of the project is to create an easy to use, lightweight, 3D library with a default WebGL renderer. The library also provides Canvas 2D, SVG and CSS3D renderers in the examples.

如果须要用到 3D 技术的话，Three 会是一个不错的抉择。

这么多个库一个比一个高大上，那么做一名求知者，我想首先让本人先输入一点货色好有反馈是一个不错的学习形式。也就是说的先搞进去点货色看看，让本人产生一些成就感。

Ant Design Charts 目前看是设计给 React，虽说用 React 也无所谓了，然而思考到入门的形式应该更加的通用一些，所以还是抉择一个更加不依赖与其余框架的库来进行尝试吧。

Apache Echarts 就不错，应用非常简单就能够出货色，残缺代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>apache echarts</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.1/dist/echarts.min.js"></script>
  </head>
  <body>
    <div id="main" style="width: 600px; height: 400px"></div>
    <script type="text/javascript">
      var myChart = echarts.init(document.getElementById('main'))
      var option = {
        title: {text: 'ECharts entry example',},
        legend: {data: ['Sales'],
        },
        xAxis: {
          data: [
            'shirt',
            'cardign',
            'chiffon shirt',
            'pants',
            'heels',
            'socks',
          ],
        },
        series: [
          {
            name: 'Sales',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      }
      myChart.setOption(option)
    </script>
  </body>
</html>

后果如图所示

用一句话来总结就是：把 option 作为参数传递给 echarts 并且将后果渲染到 #main 元素内。

留神：tooltip: {} 能够去掉，但 yAxis: {} 不能够去掉。

title: 报表的 title。

title: {text: 'ECharts entry example',}

legend: 报表图例。

legend: {data: ['Sales']
}

xAxis: x 轴。

xAxis: {data: ['shirt', 'cardign', 'chiffon shirt', 'pants', 'heels', 'socks']
}

series: 系列，按程序对应 x 轴的值。

series: [
  {
    name: 'Sales',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20],
  },
]

好了，第一个可视化就这么的简略！

echarts 的官网最近降级了，感兴趣的同学能够导航过来看看。

初学时，模拟是一个不错的办法，尽管是 echarts 简略的 example 即使是模拟也可能很难产生成就感，然而你也能够自由发挥主管能动性，去用本人的数据去配置一些报表。这样更有利于了解图表自身所传播的信息。

比方，咱们来拿 January 2021 的关系型、文档型、kv 型、时序型、图型 5 种数据库的打分前五名做一个统计。

关系型

排名	库	分数
1	Oracle	1322.93
2	MySQL	1252.06
3	Microsoft SQL Server	1031.23
4	PostgreSQL	552.23
5	IBM Db2	157.17

文档型

排名	库	分数
1	MongoDB	457.22
2	Amazon DynamoDB	69.14
3	Microsoft Azure Cosmos DB	32.97
4	Couchbase	31.63
5	CouchDB	16.35

kv 型

排名	库	分数
1	Redis	155.01
2	Amazon DynamoDB	69.14
3	Microsoft Azure Cosmos DB	32.97
4	Memcached	25.97
5	Hazelcast	8.77

时序型

排名	库	分数
1	InfluxDB	26.32
2	Kdb+	7.96
3	Prometheus	5.71
4	Graphite	4.68
5	RRDtool	3.19

图型

排名	库	分数
1	Neo4j	53.79
2	Microsoft Azure Cosmos DB	32.97
3	OrientDB	5.33
4	ArangoDB	5.29
5	JanusGraph	2.58

数据来源于 db-engines，咱们把他们做成一个多 legend 的柱状图。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>apache echarts</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.1/dist/echarts.min.js"></script>
  </head>
  <body>
    <div id="main" style="width: 600px; height: 400px"></div>
    <script type="text/javascript">
      let myChart = echarts.init(document.getElementById('main'))

      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {type: 'shadow',},
        },
        legend: {data: ['关系型', '文档型', 'kv 型', '时序型', '图型'],
        },
        xAxis: [
          {type: 'value',},
        ],
        yAxis: [
          {
            type: 'category',
            data: ['5th', '4th', '3th', '2th', '1th'],
          },
        ],
        series: [
          {
            name: '关系型',
            type: 'bar',
            emphasis: {focus: 'series',},
            data: [157.17, 552.23, 1031.23, 1252.06, 1322.93],
          },
          {
            name: '文档型',
            type: 'bar',
            emphasis: {focus: 'series',},
            data: [16.35, 31.63, 32.97, 69.14, 457.22],
          },
          {
            name: 'kv 型',
            type: 'bar',
            emphasis: {focus: 'series',},
            data: [8.77, 25.97, 32.97, 69.14, 155.01],
          },
          {
            name: '时序型',
            type: 'bar',
            emphasis: {focus: 'series',},
            data: [3.19, 4.68, 5.71, 7.96, 26.32],
          },
          {
            name: '图型',
            type: 'bar',
            emphasis: {focus: 'series',},
            data: [2.58, 5.29, 5.33, 32.97, 53.79],
          },
        ],
      }

      myChart.setOption(option)
    </script>
  </body>
</html>

成果如下：

像 echarts 这种简略疾速开箱即用的库真的十分的不便，从思维形式的出发点来看的话，echarts 更适宜于那种基于已有的场景数据，去思考能够匹配到 echarts 的哪个图表上，而后把数据怼进去就能出图这样的形式。

虽说这么来应用也还好，但总有一种“想方法套进去”的感觉，始终处于一种被动的行为模式当中，可能对于后期的学习会有不错的帮忙，然而对于降职而言可能会暴露出不足创造力的因素。

所以在缓缓相熟了根本的可视化计划之后，浏览一些不错的书刊，从图表自身的设计初衷开始，不是为了作图而作图，而是为了传播特定的信息而抉择某个图，这样的思考形式应该是抉择可视化所应具备的根底业务能力吧。

正文完