Question

数据可视化常用图表设计

Answer 1

       最近在一个项目中做数据可视化设计和实现的功能，有一些前端图表设计和实现的收获跟大家分享。

        数据分析和数据可视化的优点不言而喻，但是数据可视化一定要结合用户角色特征进行展示才有意义。比如普通员工和管理者角色，关注的重点肯定不同，普通员工会更注重个人绩效、个人的排名等，而管理者会更注重整个部门的整体绩效情况，可能还会关心整体中的一些极端个例。

        所以为不同角色的用户提供适合的数据分析视图，才能让数据展示有意义。

        数据可视化的常用图表包括柱状图、饼图、折线图、散点图、雷达图、漏斗图等。

      （1）柱状图

     优点：强调个体和个体之间的差异，由于人眼对高度比较敏感所以易于比较数据间的差别；

     缺点：不适宜大量的数据集即项数较多时不适合使用；

     适用场景：一个维度的数据比较、数据单纯性展示、排序数据展示等；

     适用数据：数据集不大的二维数据集；

     注意事项：通常用户习惯认为柱状图的X维是时间维，可以用颜色来区分每根柱子，改变用户对时间趋势的看法； 如果分类项目的标签文本比较长，会出现重叠，建议使用条形图 。

   （2）饼图

      优点：直观的显示各部分的占比和分布情况，强调个体和总体的比较；

      缺点：数据不精细，不适合分类较多的情况；

      适用场景：一个维度各项指标（一般不超过5个项目）占总体的占比情况，分布情况；

      适用数据：具有整体意义的各项相同数据；

      注意事项： 使用时饼图最好不超过5个，区块越多用户提取数据的能力就越弱；

    （3）折线图

      折线图分为直线折线图和曲线折线图。 直线折线图适用于离散变量，曲线折线图适用于连续变量。

      优点：反应数据变化趋势;

      缺点：数据集太小时显示不直观；

      适用场景：需要反应变化趋势、关联性；

      适用数据：时间序列数据，关联类数据；

   （4）散点图

    散点图还有一种变形是气泡图，气泡图通过每个点的面积大小反映第三维。

     优点：直观反映数据集中情况，对离散数据线性回归等曲线预测性的拟合辅助作用；

     缺点：适用场景比较少；

     适用场景：对离散数据进行预测，两个维度的数据；

     适用数据：离散值数据；

  （5）其他数据分析常用图

    热力图，用于表示密集程度，可以直观清楚地看到页面上每一个区域的访客兴趣焦点，图形化展示，清晰直观；

    漏斗图，用于表示数据转化类关系，适用于业务流程比较规范、周期长、环节多的流程分析，通过漏斗各环节业务数据的比较，能够直观地发现和说明问题所在；

    仪表盘，指标类数据；

    雷达图，适用于多维数据（四维数据），且每个维度必须可以排序。

    最后其他最重要的核心数据，直接用数字显示，最直观。

前端常用的可视化技术主要有d3.js、echarts、highcharts；

其中d3.js的定制化更强，但是美观度和工作量需要自己把握；echarts由百度提供，免费使用，开发工作量小，但是定制化能力弱；highcharts和echarts比较类似但是需要商业授权。

highcharts和d3.js是基于SVG渲染的，性能差些，但是是基于DOM操作的，用户交互更精确，可以通过virtual dom技术解决性能差的问题，如react前端框架。

echarts基于canvas渲染的，性能更好些。