数据可视化常用图表设计

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

一、为用户提供个性化的数据分析视图

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

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

二、数据可视化常用图表

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

      (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渲染的,性能更好些。

推荐阅读更多精彩内容