数据可视化分析

Posted Wayne Zhu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了数据可视化分析相关的知识,希望对你有一定的参考价值。

  目前来说,主流的数据可视化框架包括d3.js、zrender.js、Echarts等等,后者是百度开发的,百度前端团队还是非常强的,而其代表也是Echarts框架在前端可视化方面的探索。

  在Echarts4.0中提供了canvas和svg两种渲染方式,而d3是以svg为主的。另外,对于Echarts来说,默认使用的时canvas渲染,但是我们可以配置为svg渲染,且对于低版本的IE,echarts甚至使用了vml来支持。另外,Echarts底层使用了canvas类库zrender,它是非常轻量的,zrender也是百度前端开发的框架,使用起来非常方便,只需要去github上download下来,然后找到dist中的zrender.js,就可以像下面这样画一个圆了:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>zrender</title>
  <style>
    div#main {
      width: 500px;
      height: 500px;
      border: thin solid red;
    }
  </style>
  <script src=\'./zrender.js\'></script>
</head>
<body>
  <div id="main"></div>  
  <script>
    var zr = zrender.init(document.getElementById(\'main\'))
    var circle = new zrender.Circle({
      shape: {
        cx: 150,
        cy: 50,
        r: 40
      },
      style: {
        fill: \'none\',
        stroke: \'#F00\'
      }
    })
    zr.add(circle)
  </script>
</body>
</html>
View Code

  使用这种类库的好处就是可以轻松的完成效果,而不会自己写比较底层的重复代码。

  首先,我们知道canvas是html5提出的,使用html5标签,然后底层用js来写,它是位图,所以在放大、缩小的过程中会有失真问题,但是canvas的功能更为强大一些。而svg是矢量图,是使用xml来写的,他的特点是无论怎么缩放都不会失真。并且canvas可以处理更大的数据量,而svg则相对较弱。 之前说到Echarts更为流行,这是因为Echarts提供了svg和canvas两种方式,这是我们可以自由切换的,所以可以适应不同的场景. 比如在windows系统,为了达到更好的渲染效果,我们会在Firefox浏览器使用svg的渲染引擎,而在IE浏览器使用canvas的渲染引擎。但是需要注意的是在IE8以下的浏览器版本中,是不能使用这些可视化工具的。 更多如下所示;
        

  (其中,绿色表示推荐使用svg、红色表示推荐使用canvas,而灰色表示使用svg和canvas都是可以的,至于哪一个更为合适,还是需要我们自己来测试才能做定夺)

  

   移动平台优选SVG。 在移动端上,优于cpu和内存限制,canvas的表现可能会非常差,而相比之下svg会有更多优势。所以,我们建议在移动端使用svg进行渲染。

  

  图表个数很多时优选svg。 当图表个数很多时,占用的内存很大程度上造成了页面是否卡顿的体验差异。在这一情况下,svg的优势明显。 canvas的内存占用量相比svg可以达到十倍以上。

  

  导出小文件高清晰时使用svg。 svg文件小,并且可以无限清晰放大。

 

  部分特殊渲染效果只有canvas支持,使用canvas。对于比如炫光尾迹特效等,只有canvas支持,但是除此之外,大部分svg都是支持的,就需要使用svg了。

  

  数据量特别大的时候推荐使用canvas渲染。  

  

  综上,我们使用Echarts是不错的选择,svg可以使得移动端的使用占用内存小,流产度高;对于大数据量,使用canvas处理; 而对于低版本的ie,也是可以使用vml,所以,一个echarts就可以解决所有问题了。

  

以上是关于数据可视化分析的主要内容,如果未能解决你的问题,请参考以下文章

分析音频文件java

json 可视代码工作室Angular with Firebase片段

高级数据分析可视化低代码技术框架选型初步分析

高级数据分析可视化低代码技术框架选型初步分析

数据分析可视化利器:python pandas-profiling 一行代码EDA 探索性数据分析

R语言回归anova方差分析相关性分析 《精品购物指南》调研数据可视化|附代码数据