熱線電話：13121318867

登錄
首頁精彩閱讀大數據時代的3個圖表可視化利器_數據分析師
大數據時代的3個圖表可視化利器_數據分析師
2014-12-30
收藏

大數據時代的3個圖表可視化利器_數據分析師


還記得阿里巴巴那個令人澎湃激情的雙十一嗎？還記得淘寶生動形象地把你的的消費歷程一一地展示給你看嗎？還記得那些酷炫拽的it報告圖表嗎？在這個大數據 越來越盛行的年代，怎樣去表達一些用戶的關系，人物的關聯，甚至是事情的發展，都讓我們有更多的表達方式。其中最簡單直接，形象明了的就是用圖表說明問題 了。
 
如果在以前，要實現各種圖表，可能很多人會選擇flash。但是flash成本較高，圖表多的時候很耗性能。后來越來越多的純js框架出現，讓大家有了更多的選擇。所以接下來我想推薦幾個不錯的圖表js框架給大家用。
 
1.highcharts
 
這是一個本人認為很好用，同時很多童鞋在用的一個框架。這個框架的中國社區的童鞋，比較積極地維護和不斷更新著好多實例。如果使用這個框架，往往能在豐富的例子找到類似的表達樣圖。推薦程度4個星啊。截幾個圖給大家看看。
 

\
\
\
 
實用起來也很簡單方便，例如你可以這樣實現：
 
[html] view plaincopy
1.  
2.  
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.  
33.      
34.  
35.     
36.  
37.  
再細節的東西我就不詳細說了，只要大家去它的中文網看一下，就一清二楚了。
 
http://www.hcharts.cn/index.php
 
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} 
 : {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); 


CDA數據分析師考試相關入口一覽（建議收藏）：

? 想報名CDA認證考試，點擊>>>   “CDA報名” 了解CDA考試詳情；

? 想學習CDA考試教材，點擊>>> “CDA教材” 了解CDA考試詳情；

? 想加入CDA考試題庫，點擊>>> “CDA題庫” 了解CDA考試詳情；

? 想了解CDA考試含金量，點擊>>> “CDA含金量” 了解CDA考試詳情；

D3 echarts 大數據 數據分析

數據分析咨詢請掃描二維碼

若不方便掃碼，搜微信號：CDAshujufenxi

上一篇圖論在大數據分析中的作用！
下一篇CDA認證再升一檔！與國家共同推進大數據人才培養標準教育事業！
數據分析師考試動態
CDA報考指南
數據分析學習
數據分析師資訊
更多

CDA教育閉環

常見問題

關于我們

CDA數據分析師公眾號

  • CDA數據分析師公眾號

CDA考試中心小程序

  • CDA考試中心服務號

CDA數據分析師App下載

  • CDA數據分析師App下載
Copyright © 2015-2021, www.ruiqisteel.com All Rights Reserved. CDA數據分析師(北京國富如荷網絡科技有限公司) 版權所有 京ICP備11001960號-9 京公網安備 11010802034615號 經營許可證編號：京B2-20210330
聯系電話：13321103290 (微信同號)

OK
客服在線
立即咨詢
日韩人妻系列无码专区视频,先锋高清无码,无码免费视欧非,国精产品一区一区三区无码
客服在線
立即咨詢