数据可视化

身份的转换
1,341 阅读9分钟

数据可视化

一、基本概念

1.什么是数据可视化？

数据可视化是关于数据视觉表现形式的科学技术研究。可以简单的理解为：将数据转换成易于人员辨别识别的数据表现形式。常见的有：2D图表、3D图表、地图、矢量图等。

2.数据可视化发展史

数据可视化起源于20世纪60年代诞生的计算机图形学。计算机图形学广泛应用于各个领域，深刻影响改变我们的生活。常见的有：操作系统、工程制图CAD、计算机动画、计算机游戏、VR技术、数据可视化等。

在获得计算机图形学发展后，先后经历了科学可视化、信息可视化和数据可视化三个阶段，最初由科研人员提出科学建模和数据的可视化需求，在进入 20 世纪 90 年代后，出现大量单机数据可视化需求，EXCEL 是这个时期的代表，互联网时代各种产品兴起，大数据爆发式增长，促使数据可视化技术飞速发展。

3.数据可视化应用常见

  • 简单应用

    • Excel
    • XMind

  • 复杂应用

    • 数据大屏
    • 数据报表
    • 地图

4.数据可视化发展场景

  • 逐步成为前端工程师的标准技能

  • 具备可大大增长自身的竞争力

  • 未来具有广阔的发展前景

    • 数据可视化产品化或服务化，类似阿里云 datav、腾讯 云图
    • 往其他绘图领域发展，如浏览器游戏、3D 绘图、绘图工具等等

二、部分数据可视化解决方案

1.Highcharts

Highcharts是一个用纯 JavaScript 编写的一个图表库， 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表，Highcharts 支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表，其中很多图表可以集成在同一个图形中形成混合图。

Highcharts 从 4.2.0 开始，已经不依赖 jQuery（参考例子），如果你的页面中不需要 jQuery，那么无需引入；不依赖 jQuery 的原因是我们将去掉了适配器并支持 CommonJS 模块标准，也就是说 Highcharts 可以在所有 CommonJS 规范下的环境中运行（例如 Nodejs），这也使得我们的产品可以结合目前市面上常用的库使用，例如 React、Browserify 、Webpack、Vue、AngularJS 等。

1.在react中的使用

Highcharts 包含标题（Title）、坐标轴（Axis）、数据列（Series）、数据提示框（Tooltip）、图例（Legend）、版权标签（Credits）等，另外还可以包括导出功能按钮（Exporting）、标示线（PlotLines）、标示区域（PlotBands）、数据标签（dataLabels）等。

如图：

图表类型：

图表类型

基本用法

安装

npm install highcharts --save

jd-admin/src/views/home/Index.jsx

import React, { Component } from 'react'
import Highcharts from 'highcharts'
export default class Home extends Component {
  componentDidMount(){
    let Data = {
      chart:{
        type:'line'// 折线/曲线图：line; 面积图：area;柱状/条形图：bar;饼状图：pie...
      },
      title: { //表头
        text: '比比谁吃的多'
      },
      subtitle: { //副标题
        text: '数据来源：thesolarfoundation.com'
      }, 
      xAxis:{
        categories:['苹果','香蕉','橙子'],
        title:{
          text:'水果'
        }
      } ,
      yAxis: { //y坐标
        title: {
          text: '吃了多少'
        }
      },
      series: [{ //数据列
        // 数据列的名字
        name: '小猴',
        // 数据
        data: [1,4,1]
      }, {
        name: '小蔡',
        data: [3, 2, 5]
      }, {
        name: '小雷',
        data: [3, 2, 1]
      }],
      tooltip:{//数据提示框
        enabled : true //默认值为true
      },
      credits: { //去掉版权logo
        enabled: false
      }
    }
    Highcharts.chart(this.refs.alarmHighChart, Data);//实例化绑定容器的方式
​
  }
 
  render() {
    return (
     <>
      <div ref="alarmHighChart" />
     </>
   
    )
  }
}

法二：

import React, { Component } from 'react'
// import { Statistic, Row, Col, Button } from 'antd';
import Highcharts from 'highcharts'
// import HighchartsReact from 'highcharts-react-official'
export default class Home extends Component {
  componentDidMount(){
    this.renderGraph();
  }
  renderGraph = () => {
    let Data = {
      chart:{
        type:'bar'// 折线/曲线图：spline; 面积图：area;柱状/条形图：bar;饼状图：pie...
      },
      title: { //表头
        text: '2010 ~ 2016 年太阳能行业就业人员发展情况'
      },
      subtitle: { //副标题
        text: '数据来源：thesolarfoundation.com'
      },
      yAxis: { //y坐标
        title: {
          text: '就业人数'
        }
      },
      // 图列
      legend: {
        layout: 'vertical',//方向
        align: 'left',//在图表中的对齐方式
        verticalAlign: 'middle'
      },
      series: [{ //数据列
        // 数据列的名字
        name: '安装，实施人员',
        // 数据
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
      }, {
        name: '工人',
        data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
      }, {
        name: '销售',
        data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
      }, {
        name: '项目开发',
        data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
      }, {
        name: '其他',
        data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
      }],
      responsive: {//响应式的样式
        rules: [{
          condition: {
            maxWidth: 800
          },
          chartOptions: {//图内的样式
            legend: {
              layout: 'vertical',
              align: 'center',
              verticalAlign: 'bottom'
            }
          }
        }]
      },
      tooltip:{//数据提示框
        enabled : true
      },
      credits: { //去掉版权logo
        enabled: false
      }
    }
​
    Highcharts.chart(this.refs.alarmHighChart, Data);//实例化绑定容器的方式
  }
  render() {
    return (
     <>
      <div ref="alarmHighChart" />
     </>
    )
  }
}
2.Highstock和Highmaps

除了Highcharts这款基本图表产品，另外还有Highstock股票及大数据量时间轴图标和Highmaps地图这两个产品。

(1)他们三者之间的关系：

Highstock 是完全包含 Highcharts 的，是在 Highcharts 的基础上增加了更多高级功能；Highmaps 则完全独立，不过我们提供了地图功能模块 map.js （在 Highmaps 资源包的 modules 目录）供 Highcharts 或 Highstock 调用。

（2）混合使用

A. Highcharts + Highstock 时只需要引入 highstock.js

<script src="http://cdn.highcharts.com.cn/highstock/highstock.js"></script>

B. Highcharts + Highmaps 混合使用是需要 引入 highcharts.js + map.js

<script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script> 
<script src="http://cdn.highcharts.com.cn/highmaps/modules/map.js"></script>

C. Highstock + Highmaps 或 Highcharts + Highstock + Highmaps 混合使用时需引入 highstock.js + map.js

<script src="http://cdn.highcharts.com.cn/highstock/highstock.js"></script> 
<script src="http://cdn.highcharts.com.cn/highmaps/modules/map.js"></script>

2.AntV

AntV 是蚂蚁金服全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。

AntV 包括以下模块：

  • G2：可视化引擎
  • G2Plot：图表库
  • G6：图可视化引擎
  • Graphin：基于 G6 的图分析组件
  • F2：移动可视化方案
  • ChartCube：AntV 图表在线制作
  • L7：地理空间数据可视化
基本用法：

安装

npm install @antv/g2 --save

基于 AntV 技术栈还有许多优秀的项目，在 React 环境下使用 G2，我们推荐使用 Ant Design Charts，BizCharts 和 Viser。

import React, { Component } from 'react';
import { Column,line } from '@ant-design/charts';
class Page extends Component {
  render() {
    const data = [
      { year: '1991', value: 3 },
      { year: '1992', value: 4 },
      { year: '1993', value: 3.5 },
      { year: '1994', value: 5 },
      { year: '1995', value: 4.9 },
      { year: '1996', value: 6 },
      { year: '1997', value: 7 },
      { year: '1998', value: 9 },
      { year: '1999', value: 13 },
    ];
    
    const config = {
      data,
      height: 400,
      xField: 'year',
      yField: 'value',
      point: {
        size: 5,
        shape: 'diamond',
      },
      // 配置柱形图的样式
      columnStyle: {
        fill: 'green',
        fillOpacity: 0.5,
        // stroke: 'black',
        lineWidth: 1,
        lineDash: [4,5],
        strokeOpacity: 0.7,
        shadowColor: 'black',
        shadowBlur: 10,
        shadowOffsetX: 5,
        shadowOffsetY: 5,
        cursor: 'pointer'
      },
      // 配置 线形图的样式
      // lineStyle: {
      //   stroke: 'black',
      //   lineWidth: 2,
      //   lineDash: [4,5],
      //   strokeOpacity: 0.7,
      //   shadowColor: 'black',
      //   shadowBlur: 10,
      //   shadowOffsetX: 5,
      //   shadowOffsetY: 5,
      //   cursor: 'pointer'
      // }
    };
    return <Column {...config} />;
  }
}
export default Page;

3.zrender

zrender 是二维绘图引擎，它提供 Canvas、SVG、VML 等多种渲染方式。ZRender 也是 ECharts 的渲染器。

  • 引入zrender库
  • 编写div容器
  • 初始化zrender对象
  • 初始化zrender绘图对象
  • 调用zrender add方法绘图

4.canvas

canvas是HTML5的新特性，可以通过JavaScript在canvas元素上绘制图案。

  • 编写canvas标签并指定宽高
  • 获取canvas DOM对象
  • 获取Canvas对象
  • 设置绘图属性
  • 调用API

5.svg

SVG 是一种基于XML的图像文件格式，可以用于绘制矢量图形。

  • 编写svg标签并指定宽高
  • 编写sbg绘图标签
  • 编写绘图属性和样式

6.WebGL

WebGL（Web Graphics Library）是一种 3D 绘图协议，WebGL可以为 HTML5 Canvas 提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示 3D 场景和模型了，还能创建复杂的导航和数据视觉化。

7.Skia

Skia是Chrome和Android的底层2D绘图引擎，采用C++编写，位于浏览器的底层。

其中Chrome使用Skia作为绘图引擎，向上层开发了canvas、svg、WebGL、HTML绘图能力。

8.OpenGL

OpenGL是2D、3D图形渲染库，常用于CAD、VR、数据可视化等领域。

9.D3

D3（Data-Driven Documents） 是一个 Javascript 图形库，基于 Canvas、Svg 和 HTML。

10.Three.js

Three.js 是一个基于 WebGL 的 Javascript 3D 图形库。

三、为什么数据可视化推荐Echarts?

1.ECharts VS Highcharts

Highcharts 和 ECharts 的争论非常多;整体上的感受是：

  • 学习容易程度：只要懂JS，那么相信你能很快上手。两者打分相同。但是百度出品的Echarts对于国内城市已经有了相应的配置，调用非常方便。因此在绘制地图方面，Echarts略胜一筹。
  • 大数据表现力：有网友说，当数据量达到万条的级别时，Highcharts的多表联动、自动缩放具有更强的优势，而Echarts则会出现明显的卡顿，需要设置datazoom。因此Hightcharts完胜。
  • 文档友好程度：Echarts是百度的，Highcharts是国外的。另外，Echarts的文档像是说明书，而Highcharts的文档像是博客。根据个人喜好判断。
  • 图表美观程度：看看两家的实例Echarts、Highcharts，Echarts完爆啊（上面的对比雷达图就是用Echarts做的）！而且Echarts基于Canvas，对于3D绘图有绝对优势，能画出极漂亮的图形。
  • 图表的丰富程度：两方面，一是图表种类，二是3D表现力。Echarts丰富的图表种类，和惊艳的3D效果，吊打Highcharts。
  • Highcharts 收费，这是很多开发者转向 ECharts 的主要原因
  • ECharts 国内知名度更高，国内企业认可度更高

2.ECharts VS AntV

  • AntV 文档阅读体验更符合互联网产品使用习惯
  • AntV 产品体系拆分更加清晰，但一定程度上提升了学习成本
  • ECharts 社区更强大
  • ECharts 使用更加广泛

ECharts 优势总结

  • 简单易用
  • 文档全面
  • 社区强大
  • 高知名度
avatar
文章
阅读
粉丝