数据分析之图表展现

Posted 2023-04-18

参考技术A 数据分析之后，如何将分析的结果清晰的展现出来，让领导或阅读者能快速理解这份分析报告并抓取结果呢？那当然是用图表说话了。那么有哪些图表？分析时该用哪种图表？如何表达？本文我将简单介绍，供大家参考。

1.作用：

表达形象化；

突出重点；

体现专业化。

2.种类：

饼图、柱状图、条形图、折线图、散点图、表格。

3.通过关系选图表：

大部分数据间关系可以归纳6种类型：成分、排序、时间序列、频率分布、相关性、多重数据比较。

(1)成分：也叫构成，表示总体的一部分，一般用饼图表示，还可用柱形图、条形图等。

(2)排序：用于不同项目、类别间数据的比较。可用柱状图、条形图、气泡图、帕累托图。

(3)时间序列：用于表示某事按一定的时间顺序发展的走势或趋势，一般用折线图。

(4)频率分布：与排序类似，也可用频数分布表示，一般用柱形图、条形图、折线图。

(5)相关性：用来衡量两大类中各项目的关系，一般用柱形图、旋风图、散点图、气泡图。

(6)多重数据比较：指数据类型多余2个的数据分析比较，一般用簇状柱形图、雷达图。

4.图表制作步骤：

(1)确定所要表达的主题或目的

(2)确定哪种图表最适合表达目的

(3)选择数据制作图表

(4)检查是否真实有效的展示数据

(5)检查是否表达了观点

用表格来表示"图所不能说的话"

1.突出显示单元格： 按照指定的规则，把表格中符合条件的单元格用不同颜色、字体颜色将数据突出显示出来。规则有：>、=、<、介于、重复值等。

2.项目选取： 与突出显示单元格一样，区别是指定规则不同，前者是与原始数据直接相关的数据，而项目选取是指定值对原始数据经过计算的数据。

3.数据条： 某个单元格值与其他单元格值比较。数据条的长度代表该单元格值得大小。

4.图标集： 对数据进行注释，并可按阈值将数据分类，每个图表代表一个范围的值。特别适用企业运营指标发展态势的监控。

5.迷你图： 显示数值的趋势或者突出最值，可插入迷你图

上面的操作是：开始---条件格式---XXX，大家可以动手操作一下。

1.平均线图： 用来对比图中各项指标与平均值的差距。也可用其他参考线。

操作：增加一列平均值数据，并将其图表类型改为折线图。

2.双坐标图： 用于有2个系列及以上的数据，并且它们的量纲不同或者数据差距很大时。

操作：设置数据系列个事，勾选次坐标轴来完成

3.竖形折线图 ： 用于分析比较多个不同产品、项目在每个指标方面的表现，得出每个指标属性偏向。

操作：采用带平滑线和数据标记的散点图绘制的。再增加辅助列来添加标签。

4.瀑布图 ： 也叫步行图、阶梯图。

操作：需要准备占位数据---堆积柱形图

5.帕累托图： 也叫排列图、主次图，是按照发生频率的高低顺序绘制的直方图。可用来分析质量问题，用于分析影响质量问题的主要因素。

6.旋风图： 也叫成对条形图或对称条形图。

操作：修改坐标轴格式和添加数据标签绘制

7.人口金字塔图： 用于反映人口的过去、现在、未来的发展情况。分为3类：青年型、成年型和年老型。

8.漏斗图： 需要占位数据，用堆积条形图制成

9.矩阵图（散点图）： 通过调整坐标轴的位置绘制。

绘制图表的工具有很多，比如Power BI，Tableau，Fine BI等，大家可以利用这些软件绘制个性化的图表。

                                                  本文为《谁说菜鸟不会数据分析-入门篇》第六章读书笔记

数据可视化之下发图实践

Python实战社群

Java实战社群

长按识别下方二维码，按需求添加

扫码关注添加客服

进Python社群▲

扫码关注添加客服

进Java社群▲

作者丨个推前端工程师 东风

来源丨个推技术学院(getuitech)

随着互联网的快速发展，数据维度越来越广，呈现形式也越发丰富，具有多维度数据特点的相关业务实践都能通过可视化图表来展示，比如个推的下发图，从时间和区域两个维度，可以即时、直观地展现个推数据下发的过程。

一、下发图的由来

个推下发图主要用于呈现个推为APP提供推送服务时数据的下发过程，可以直观显示个推推送触达到的城市，有利于开发者对下发数据进行分析。

 

个推下发图运用了迁徙图的原理，再通过自主设计开发出的一套可视化展示图像。这一类型的可视化可以广泛应用于拥有地理位置信息和数据转移特征的数据展示。

二、下发图的构成

下发图主要由地图、地理位置信息，以及飞线组成。如下图所示：

三、下发图的技术要点

1.地图

地图可以利用第三方地图服务，也可以自主绘制地图，本文以后者为例。自主绘制的地图主要利用了墨卡托投影原理，将地球正轴圆柱投影，由经纬度信息转化到画布上对应的位置。

本文案例中用了 d3.js 中的 geoMercator 进行墨卡托投影转换。

墨卡托投影图解

然后我们可以在阿里云的 datav 中获取地图的 geojson 数据，具体地址可参见括号内链接，（https://datav.aliyun.com/tools/atlas ）再通过 canvas 原生 Api，添加背景色、边框等，就可以画出想要的地图了。

注意：下图中的地图角度透视主要应用了 css 中的 transform，perspective、rotateX、rotateY、rotateZ 等。

遵循上述步骤，一个透视角度的静态地图就绘制完成了。

2.贝塞尔曲线

贝塞尔曲线是计算机图形学中相当重要的参数曲线，它通过一个方程来描述一条曲线，根据方程的最高阶数，又分为线性贝塞尔曲线、二次贝塞尔曲线、三次贝塞尔曲线和更高阶的贝塞尔曲线。

本案例中主要应用了二次贝塞尔曲线，二次贝塞尔曲线的函数如下：

B(t) = (1-t) ²P0 + 2t(1-t)P1 + t²P2, t ∈ [0,1]

二次贝塞尔曲线

上图为本文案例中飞线的贝塞尔曲线应用，其中 from 为起点，to 为终点，curveness 为曲线的曲率，取值-1 ~ 1，曲率的绝对值越大，曲线越弯曲，percent为飞线位置占比。

 

3.动画

在 canvas 中，动画效果的实现通常是由 window.requestAnimationFrame 循环执行，因此，飞线需要算出每一帧中飞线的状态，以及飞线的入场和离场形态。

 

4.发光效果

那么下发图的特效具体如何实现呢？首先我们来介绍一下头部发光效果的实现过程：

我们以工业中的HSL色彩模式为颜色标准，通过对色相(H)、饱和度(S)、明度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色，HSL即代表色相、饱和度、明度三个通道的颜色，这一标准几乎包括了人类视力所能感知的所有颜色。以此为依据，可以发现光源的发光规律，即光源中心的明亮度最高，由内向外，明亮度依次递减。

所以根据配置的基础颜色，就能获取到顶点发光处颜色的明亮度，大致方法如下：

完成头部发光步骤后，接下来需要打造一个酷炫的形状。发光的头部是一个类似棉签棒的形状，该形状可以用一个半圆和一个三角形来绘制，再根据曲线的切线，获取三角形以及半圆的旋转角度。

完成下发图头部制作后，接下来需要进行尾部的操作，因为canvas自带线性渐变，所以具体代码如下：

canvas 的落地效果呈圆形渐变样式，当飞线到达终点后，完整的落地效果就开始展示，整个画面类似雨滴降落到地面。

5.透视

如果不调整透视角度，贝塞尔曲线的样式如下图所示：

当曲线与下发方向的角度呈90度时，曲率最大；角度为0度或者180度时，曲率最小，与余弦定律相似。

其中 from 是起始位置，to 是终止位置，curveness 是曲线的曲率，angel 是视线的角度。

最终效果如下：

四、技术选型

在进行下发图的技术选型时，个推技术团队对比了 svg 和 canvas 两种技术栈，最后选择了 canvas，然后配合 requestAnimationFrame 画出下发轨迹的帧动画。两款技术栈的具体性能对比如下：

名称	svg	canvas
动画帧数FPS	12～43fps	42~60fps
CPU占用率	高于100%	20%~30%
JS Heap内存	11mb左右	9.3mb左右
说明	略有卡顿	动画流畅

五、总结

随着数据维度的扩展和丰富，数据可视化的形态日渐丰富。作为地理位置信息和数据转移特征的数据可视化图表，下发图可以更直观地展现个推为APP提供推送服务时的下发量、下发区域等数据，对APP的行业分析以及战略调整有着指导性意义。

      
        
        
      

       
         
         
       
 
        
 
         
 
          程序员专栏 
         
 
         
 
           扫码关注填加客服  
         
 
         
 
          长按识别下方二维码进群 
          
 
         
 
        
 
        
 
          
        
 
       
      
        
        
      
      
        
        
      

       
         
         
       
 
        
 
        
近期精彩内容推荐：  
 
        
 
 
        
 
 
        
 
 
        
 
 
        
 
         
 
          
 
           
 
            
 
             
 
              

 
             
 
            
 
           
 
          
 
         
 
        
 
        
 
        
 
         
 
          
 
           
 
            
 
             
 
              
 
               
 
                
 
                 
 
                  
 
                   
 
                    
 
                     
 
                      
 
                     
 
                     
 
                     
 
                     
 
                      
 
                     
 
                    
 
                   
 
                  
 
                 
 
                
 
               
 
              
 
              
在看点这里好文分享给更多人↓↓