基於javascript的簡單資料視覺效果:DVisual，javascriptdvisual

基於javascript的簡單資料視覺效果:DVisual，javascriptdvisual

也是好久沒更新部落格了，主要是之前都是學到了新東西新演算法就寫篇部落格總結一下，去年也是到處實習了一段時間，沒有太多時間去吃透大部頭，所以也就好久沒有更新了。

最近看了不少資料視覺效果的書，所以也就順理成章想做點東西，同時準備把『資料視覺效果套件開發』這個作為畢業設計搞一搞，花了一兩周寫了一個DVisual出來，目前倒是只支援一些基本的圖表繪製，後面可能會加入一些比較炫酷的表徵圖，以及滑鼠操作等功能吧。

當然如果你想在在html上繪製簡單圖表，並且沒有其它特殊要求的話，現在也是可以試用一下的，本文就簡單用中文介紹一些使用方法把，感覺我這個用起來還是蠻方便的

Github地址      ，歡迎點star啊~~~~~~

還有一個tutorial，英文的：Tutorial地址 ,嫌英文麻煩的就看下邊吧：

====================================================================

1.如何開始

a. 首先是把這個dvisual.js檔案添加到你的html代碼裡面. 

<script type="text/javascript" src="dvisual.js"></script>

b.然後建立一個執行個體，傳入你的canvas的id.

dvisual = new DVisual('canvas_id');

c.然後你就可以先建立各種圖表項目了，所有圖表項目類我都有一個統一的方法draw(dv),所以複雜映像都是由點線面和文字這些基礎映像組合起來的。這裡我們加入一個bar chart：所有的參數都是用過args傳入的，args是一個類似字典的東西，照著下面這樣寫就好了

args = {'X':["ClassA","ClassB","ClassC","ClassD"]       ,'Y':[5,9,4,8]};bar = new DVBarChart(args);

d.把圖表加入到我們的DVisual執行個體即可，最後使用draw()進行繪製

dvisual.addElement(bar);dvisual.draw();

這樣我們就能得到這樣一幅映像了：你也可以吧上面的c,d合并到一句話裡並不影響映像的產生.

2.可用的類和選擇性參數。

這個可以從doc裡找到詳細的說明。在這裡簡單總結一表的參數吧(你應該不會用到點線面那些基礎圖形元素)。

a.DVBarchart()

這就是我們用來繪製上面那個圖形的類了，除了通常的bar之外，它還可以繪製stacked bar，上代碼看看：

args = {'X':["bar1","bar1","bar3"],        'stackedClass':["stacked_1","stacked_2"],        'stackedY':[[1,2],[3,4],[5,6]],        'style':'stacked',        'stackedColor':[new DVColor(55,185,241,0.5),new DVColor(207,231,62,0.5)]}

這是給出了args的內容，其它和第一步中是一樣的，style參數控製圖表的類型。可以看到這時我們沒有傳入"Y"參數了，因為此時的資料已經不是二維的了，而是每一個bar都有幾個資料，所以我們改用stackedY來傳入數值，stackedClass來傳入每一個bar上堆疊的資料名稱，至於stackedColor，作用顯而易見，當然你也可以不傳入，這樣它就是隨機的（這對所有的color都是適用的），來看看效果：

b.DVMulBarChart

如果我們想建立一個多維的柱狀圖，也就是每個標籤下面有多個bar的，那就需要使用DVMulBarChart了：

args = {'X':["A",'B'],'Ys':[[3,2,4],[5,7,8]],'Z':["first","second","third"]}dvisual.addElement(new DVMulBarChart(args));

『Y』同樣不需要了，因為此時對於每個X[I]，都應該對應一個Z.length長的數組，所以就應該是上面這個樣子，繪製的映像如下：

c.DVLineChart()

說到圖，最先想到的其實可能是散佈圖和線圖，這在DVLineChart中給予了實現，它不光支援散點和連線，還有地區圖(area),也就是與x軸構成的地區；以及泡泡圖，不多說，來看看例子：

divisual.addElement(new DVLineChart({'X':[1,2,3,4,5,6],                                     'Y':[1,2,3,4,5,6],                                     'style':'dot|line'}));

X,Y就是所有點的x值和y值，很直觀，下面的style這裡設定為dot|line，它一共有四種:dot,line,area和bubble，其中前三種是可以組合使用的，bubble因為有涉及到資料不同，所以只能單獨使用。繪圖如下：（如果把style改為'dot|line|area'）就是右邊這樣 ：

對於泡泡圖，和上面不同的是我們要添加每個bubble的半徑，所以應該是這樣的：

divisual.addElement(new DVLineChart({'X':[1,2,3,4,5,6],'Y':[1,2,3,4,5,6],                                    'bubbleRadius':[1,2,3,4,5,6],                                    'style':'bubble'}));

d.DVMulLineChart

當然，和bar一樣，如果我們有多條線段或者多種bubble要繪製，就需要用到DVMulLineChart了

dvisual.addElement(new DVMulLineChart({'Xs':[[1,-2,3,4,5,6],[1,2,3,4,5,6]],                                        'Ys':[[1,2,3,4,3,6],[-3,5,2,7,5,2]],                                        'Zs':[[3,2,1,4,5,7],[3,2,7,6,8,4]],                                        'classes':['A','B'],                                        'style':'bubble'}));

可以看出來，參數都從X,Y,bubbleRadius 變成了Xs，Ys，Zs，「classes」表示了不同種類資料的名稱，當然你也可以傳入顏色colors，這裡並沒有添加，就是隨機的。

可以看到繪製出來的映像的原點並不在最左下角，所以映像會用紅色的線來標識出0值座標

e.DVHistChart

這個比較簡單，傳入一系列的值即可，你也可以通過sec設定統計的間隔，以及yStyle設定顯示個數還是百分比。

dviusal.addElement(new DVHistChart( {'X':[4.845526425588935, 4.259344936827764, 3.8098053040235538, 1.952000211472447, 4.635797415383389, 4.024019790968537, 3.3602908242946734, 5.904528760874355, 4.198898591038685, 3.590128975916881, 4.332713128186926, 3.1865396813511784, 2.5162865661667198, 4.712821025260148, 3.71360994330834, 3.8493524061913744, 3.7159258918857536, 5.51399789047954, 3.6300232108929382, 3.545076471891732, 3.0676446553817147, 3.2444930114999093, 3.5479330646839933, 4.976746738515327, 3.9332813190873934, 5.006312033998867, 3.404727953308918, 3.5033407619438233, 3.079551989356432, 3.8632840581876042, 3.157986089467415, 3.4195326824382866, 3.8080356643280124, 2.957309227091329, 4.118392736251364, 3.6411410599078917, 3.7624757886685964, 4.8647889699576226, 5.21796736714372, 3.976067213322964, 5.126928746440573, 3.974656703704623, 3.233580498913617, 4.395312593899124, 4.068962687058488, 3.891929789953702, 4.469243993566407, 4.334454703693426, 3.9209889294562856, 3.4434304992247453, 4.497549493028219, 3.416343894896489, 4.665283209646114, 4.680609105269387, 4.983997832840491, 3.6712180044043317, 3.265064804033842, 3.4698542145767295, 3.600410757683259, 3.258705331315113, 3.4711330714824475, 5.850035283124024, 4.4280162444420395, 2.9032881754752737, 3.8438971175165753, 4.876106607781984, 2.558687703308084, 3.5013932005344044, 3.5555419525521454, 5.1907150725045845, 4.011722379620389, 3.527897189378135, 4.10495828533477, 6.62176464809461, 4.2726902430636144, 3.900071148628866, 2.575252541466217, 5.328266087881893, 2.5589399335225336, 5.724120236174612, 4.4515392634560085, 4.7151321389757594, 2.8531894976428953, 3.4703243319242265, 2.2640882905146724, 5.0719845838182795, 3.574145032952119, 4.477360695988922, 5.779618114520955, 4.456319741265055, 3.8274174274387756, 6.050865845999171, 5.286157426108568, 4.197556181625366, 3.2386132037552726, 4.409816073319034, 4.225877761979799, 5.313407146149141, 5.042124222577709, 3.979632468039347],            'yStyle':'value'}))

f.DVPieChart 和 DVRadarChart

這兩個圖的參數都很簡單，直接參看 Tutorial 就可以了。

3.總結

這個組件目前只實現了這些基礎的東西，儘可能做到完善，諸如x,y軸的名字,表格是否繪製，Pie中顯示的內容，這些你都可以通過參數進行設定的，如果可能後面會加入一些新的高大上的圖形，還有增加滑鼠的操作響應等等，會繼續豐富它就是了~~~~

最後，在github求個star~~~！！！~~~！！！