99999久久久久久亚洲,欧美人与禽猛交狂配,高清日韩av在线影院,一个人在线高清免费观看,啦啦啦在线视频免费观看www

熱線電話：13121318867

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

大數(shù)據(jù)時代的3個圖表可視化利器_數(shù)據(jù)分析師


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

\
\
\
 
實用起來也很簡單方便，例如你可以這樣實現(xiàn)：
 
[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.  
再細節(jié)的東西我就不詳細說了，只要大家去它的中文網(wǎng)看一下，就一清二楚了。
 
http://www.hcharts.cn/index.php
 
2  D3.js
 
D3.js除了用強大來形容，就不知道怎么去來表達它的厲害之處了。高效，庫里面的組件真的眼花繚亂。繼續(xù)截圖。
 
例子1：
 
\
 
例子2：
 
\
 
例子3：
 
\
 
總而言之，我記得D3.js是有書可以買的。如果能把此框架用好，定能獨當一面啊。
 
想知道詳情的可以看官網(wǎng)：http://d3js.org/
 
3.echarts
 
echarts不是外國的，是國內(nèi)百度團隊的產(chǎn)物?？偹苤俣冉y(tǒng)計做得挺不錯的。他們這個echarts也算是用到淋漓盡致。社區(qū)也算比較活躍，例子也十分多，實用一樣方便。
 
下面還是截圖加舉例吧。
 

\
\
\
\
 
最后一張截圖的js展示：
 
[javascript] view plaincopy
1. option = { 
2.     title : { 
3.         text: '瀏覽器占比變化', 
4.         subtext: '純屬虛構(gòu)', 
5.         x:'right', 
6.         y:'bottom' 
7.     }, 
8.     tooltip : { 
9.         trigger: 'item', 
10.         formatter: "{a} 
 : {c} (geybsqlxm7mc%)" 
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:'瀏覽器（數(shù)據(jù)純屬虛構(gòu)）', 
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); 

數(shù)據(jù)分析咨詢請掃描二維碼

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

數(shù)據(jù)分析師資訊
更多

OK
客服在線
立即咨詢
客服在線
立即咨詢
') } function initGt() { var handler = function (captchaObj) { captchaObj.appendTo('#captcha'); captchaObj.onReady(function () { $("#wait").hide(); }).onSuccess(function(){ $('.getcheckcode').removeClass('dis'); $('.getcheckcode').trigger('click'); }); window.captchaObj = captchaObj; }; $('#captcha').show(); $.ajax({ url: "/login/gtstart?t=" + (new Date()).getTime(), // 加隨機數(shù)防止緩存 type: "get", dataType: "json", success: function (data) { $('#text').hide(); $('#wait').show(); // 調(diào)用 initGeetest 進行初始化 // 參數(shù)1：配置參數(shù) // 參數(shù)2：回調(diào)，回調(diào)的第一個參數(shù)驗證碼對象，之后可以使用它調(diào)用相應的接口 initGeetest({ // 以下 4 個配置參數(shù)為必須，不能缺少 gt: data.gt, challenge: data.challenge, offline: !data.success, // 表示用戶后臺檢測極驗服務器是否宕機 new_captcha: data.new_captcha, // 用于宕機時表示是新驗證碼的宕機 product: "float", // 產(chǎn)品形式，包括：float，popup width: "280px", https: true // 更多配置參數(shù)說明請參見：http://docs.geetest.com/install/client/web-front/ }, handler); } }); } function codeCutdown() { if(_wait == 0){ //倒計時完成 $(".getcheckcode").removeClass('dis').html("重新獲取"); }else{ $(".getcheckcode").addClass('dis').html("重新獲取("+_wait+"s)"); _wait--; setTimeout(function () { codeCutdown(); },1000); } } function inputValidate(ele,telInput) { var oInput = ele; var inputVal = oInput.val(); var oType = ele.attr('data-type'); var oEtag = $('#etag').val(); var oErr = oInput.closest('.form_box').next('.err_txt'); var empTxt = '請輸入'+oInput.attr('placeholder')+'！'; var errTxt = '請輸入正確的'+oInput.attr('placeholder')+'！'; var pattern; if(inputVal==""){ if(!telInput){ errFun(oErr,empTxt); } return false; }else { switch (oType){ case 'login_mobile': pattern = /^1[3456789]\d{9}$/; if(inputVal.length==11) { $.ajax({ url: '/login/checkmobile', type: "post", dataType: "json", data: { mobile: inputVal, etag: oEtag, page_ur: window.location.href, page_referer: document.referrer }, success: function (data) { } }); } break; case 'login_yzm': pattern = /^\d{6}$/; break; } if(oType=='login_mobile'){ } if(!!validateFun(pattern,inputVal)){ errFun(oErr,'') if(telInput){ $('.getcheckcode').removeClass('dis'); } }else { if(!telInput) { errFun(oErr, errTxt); }else { $('.getcheckcode').addClass('dis'); } return false; } } return true; } function errFun(obj,msg) { obj.html(msg); if(msg==''){ $('.login_submit').removeClass('dis'); }else { $('.login_submit').addClass('dis'); } } function validateFun(pat,val) { return pat.test(val); }