goodsoso的个人博客分享 http://blog.sciencenet.cn/u/goodsoso

博文

大数据时代的图表可视化利器——highcharts,D3和百度的echarts[

已有 4364 次阅读 2014-12-30 14:27 |系统分类:科普集锦

可视化不是万能的,但是从不同角度、以不同方式的可视化,有时候能直观地看到数据的一些有趣的有意义的方面。
-------------------------------------------------------------------

还记得阿里巴巴那个令人澎湃激情的双十一吗?还记得淘宝生动形象地把你的的消费历程一一地展示给你看吗?还记得那些酷炫拽的it报告图表吗?在这个大数据 越来越盛行的年代,怎样去表达一些用户的关系,人物的关联,甚至是事情的发展,都让我们有更多的表达方式。其中最简单直接,形象明了的就是用图表说明问题 了。

   如果在以前,要实现各种图表,可能很多人会选择flash。但是flash成本较高,图表多的时候很耗性能。后来越来越多的纯js框架出现,让大家有了更多的选择。所以接下来我想推荐几个不错的图表js框架给大家用。

   1.highcharts
   这是一个本人认为很好用,同时很多童鞋在用的一个框架。这个框架的中国社区的童鞋,比较积极地维护和不断更新着好多实例。如果使用这个框架,往往能在丰富的例子找到类似的表达样图。推荐程度4个星啊。截几个图给大家看看。

 





实用起来也很简单方便,例如你可以这样实现:
[html] view plaincopy
  1. <html> 

  2. <head> 

  3.   <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script> 

  4.   <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/4.0.1/highcharts.js"></script> 

  5.   <script> 

  6.     $(function () {  

  7.        $('#container').highcharts({

  8.            chart: {

  9.                type: 'column'

  10.            },

  11.            title: {

  12.                text: 'My first Highcharts chart'

  13.            },

  14.            xAxis: {

  15.                categories: ['my', 'first', 'chart']

  16.            },

  17.            yAxis: {

  18.                title: {

  19.                    text: 'something'

  20.                }

  21.            },

  22.            series: [{

  23.                name: 'Jane',

  24.                data: [1, 0, 4]

  25.            }, {

  26.                name: 'John',

  27.                data: [5, 7, 3]

  28.            }]

  29.        });

  30.    });

  31.   </script> 

  32. </head> 

  33.    

  34. <body> 

  35.   <div id="container" style="min-width:800px;height:400px;"></div> 

  36. </body> 

  37. </html> 


再细节的东西我就不详细说了,只要大家去它的中文网看一下,就一清二楚了。

  2  D3.js
   D3.js除了用强大来形容,就不知道怎么去来表达它的厉害之处了。高效,库里面的组件真的眼花缭乱。继续截图。

例子1:


例子2:

 

例子3:


总而言之,我记得D3.js是有书可以买的。如果能把此框架用好,定能独当一面啊。
想知道详情的可以看官网:http://d3js.org/

 

3.echarts
echarts不是外国的,是国内百度团队的产物。总所周知,百度统计做得挺不错的。他们这个echarts也算是用到淋漓尽致。社区也算比较活跃,例子也十分多,实用一样方便。
下面还是截图加举例吧。




最后一张截图的js展示:

[javascript] view plaincopy
  1. option = {

  2.    title : {

  3.        text: '浏览器占比变化',

  4.        subtext: '纯属虚构',

  5.        x:'right',

  6.        y:'bottom' 

  7.    },

  8.    tooltip : {

  9.        trigger: 'item',

  10.        formatter: "{a} <br/>{b} : {c} ({d}%)" 

  11.    },

  12.    legend: {

  13.        orient : 'vertical',

  14.        x : 'left',

  15.        data:['Chrome','Firefox','Safari','IE9+','IE8-']

  16.    },

  17.    toolbox: {

  18.        show : true,

  19.        feature : {

  20.            mark : {show: true},

  21.            dataView : {show: true, readOnly: false},

  22.            restore : {show: true},

  23.            saveAsImage : {show: true}

  24.        }

  25.    },

  26.    calculable : false,

  27.    series : (function (){

  28.        var series = [];

  29.        for (var i = 0; i < 30; i++) {

  30.            series.push({

  31.                name:'浏览器(数据纯属虚构)',

  32.                type:'pie',

  33.                itemStyle : {normal : {

  34.                    label : {show : i > 28},

  35.                    labelLine : {show : i > 28, length:20}

  36.                }},

  37.                radius : [i * 4 + 40, i * 4 + 43],

  38.                data:[

  39.                    {value: i * 128 + 80,  name:'Chrome'},

  40.                    {value: i * 64  + 160,  name:'Firefox'},

  41.                    {value: i * 32  + 320,  name:'Safari'},

  42.                    {value: i * 16  + 640,  name:'IE9+'},

  43.                    {value: i * 8  + 1280, name:'IE8-'}

  44.                ]

  45.            })

  46.        }

  47.        series[0].markPoint = {

  48.            symbol:'emptyCircle',

  49.            symbolSize:series[0].radius[0],

  50.            effect:{show:true,scaleSize:12,color:'rgba(250,225,50,0.8)',shadowBlur:10,period:30},

  51.            data:[{x:'50%',y:'50%'}]

  52.        };

  53.        return series;

  54.    })()

  55. };

  56. setTimeout(function (){

  57.    var _ZR = myChart.getZrender();

  58.    var TextShape = require('zrender/shape/Text');

  59.    // 补充千层饼 

  60.    _ZR.addShape(new TextShape({

  61.        style : {

  62.            x : _ZR.getWidth() / 2,

  63.            y : _ZR.getHeight() / 2,

  64.            color: '#666',

  65.            text : '恶梦的过去',

  66.            textAlign : 'center' 

  67.        }

  68.    }));

  69.    _ZR.addShape(new TextShape({

  70.        style : {

  71.            x : _ZR.getWidth() / 2 + 200,

  72.            y : _ZR.getHeight() / 2,

  73.            brushType:'fill',

  74.            color: 'orange',

  75.            text : '美好的未来',

  76.            textAlign : 'left',

  77.            textFont:'normal 20px 微软雅黑' 

  78.        }

  79.    }));

  80.    _ZR.refresh();

  81. }, 2000);


这个框架的参考网址是: http://echarts.baidu.com/index.html
 
如果没有用过图表表达数据和关系的话,就赶快试试这3款好用的框架吧。 




https://wap.sciencenet.cn/blog-645848-855002.html

上一篇:关于写作,一点想到
下一篇:关于项目审计

0

该博文允许注册用户评论 请点击登录 评论 (0 个评论)

数据加载中...

Archiver|手机版|科学网 ( 京ICP备07017567号-12 )

GMT+8, 2021-5-13 14:05

Powered by ScienceNet.cn

Copyright © 2007- 中国科学报社

返回顶部