illustration

a . 引子

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

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

地圖方面資料的視覺化因為在實習的時候接觸到了一些GPS的資料，所以把這些資料投影出來看就是分析資料很重要的一部分了，當時用高德地圖的介面就寫了一個投射點的地圖工具，但是非常卡，最多1000個點就動不了了，這次藉機就寫個地圖工具，試了一下加入10000個點還能基本保持流暢，當然這個工具也不過是簡單地在Leaflet上進行的封裝，包裝了一些易用的接口出來，如果你有更多的需求，強烈建議使用Leaflet。

b . 初始化

你的html檔案必須新增四行引用，分別是：

<script type="text/javascript" src="https://github.com/justdark/dvisual/raw/master/dvmap/dvisual_map.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script type="text/javascript" src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script type="text/javascript" src="https://raw.githubusercontent.com/justdark/dvisual/master/dvmap/china.js"></script>
 

然後建立一個<div>標籤作為繪圖的載體，id是後面需要用到的識別符號:

<div id="map" style="width: 1200px; height: 700px"></div>

接著就可以scipt程式碼的地方進行各種操作了

<script>
    var dvmap = new DVisualMap('map');
    // your code here
</script>

c . 點

點的新增方法是 dvmap.addDot(),有兩種新增格式，一種就是將引數包裹在一個args中傳入,最重要的當然是position了，使用具體的一個類進行表示，text

dvmap.addDot({'position':new DVisualGeoPosition(longitude,latidude)
                ,'text':"this is a dot""
                ,'color':color})

而另一種簡化的方法是傳入引數直接傳入longitude、latitude、text，即是：

dvmap.addDot(31.0,120.0,'ssss')

另一個快速新增多個點的方法是addDots(arr)，直接傳入一個數組[[long1,lati1],[long2,lati2],[long3,lati3]],就會以預設的風格將這些點繪製在地圖上。

這裡的點預設是一種Marker，放大縮小時點的可視大小會保持不變，我們實際上可以通過設定style來繪製圓形並指定其半徑，也就是氣泡，除了將'style'設定為bubble外，還需要設定'radius'(以米為單位)

dvmap.addDot({'position':new DVisualGeoPosition(longitude,latidude)
                ,'style':'bubble'
                ,'text':'xx'
                ,'color':'#0f0'
                ,'radius':1000});

d . 線

線也是地圖資料視覺化中非常重要的一部分，線的繪製函式為dvmap.addLines(arr,color),arr同樣是一系列的點[[long1,lati1],[long2,lati2],[long3,lati3]]，這個方法會將這些點依次以color指定的顏色連線起來

dvmap.addLines([lat[t],lat[i]],'#0f0')

e . 面

面當然就是多邊形的面了，通過addPolygon(arr,color,text)進行新增，其中color預設為紅色，text預設為空(點選多邊形彈出的文字)，一個簡單的例子：

dvmap.addPolygon([[0,0],[10,0],[10,10],[0,10]])

f . 點線的例子

在網上隨便找了一份中國城市的經緯座標圖，將所有點繪製上去，效果如下(大概2500個，這個工具在繪製10000個點以下的個數的時候不灰太卡)

區域性放大的效果(點選顯示了其中一個彈出文字，這裡是設定的資料的行號，無實際意義):

隨機選了一些點和靠近上海的一個點連線起來：

g . 加入顏色圖例

有時我們需要一些圖例來顯示不同的資料，addLegend()方法可以做到這一點，傳入引數是一個數組，分別表示每一類的顏色和名稱[[color1,class_name_1],[color2,class_name_2]...],如：

dvmap.addLegend([['#f00','AAA'],['#0f0','BBBB'],['#00f','CC']]);

h . 中國區域圖

這是用來封裝的一個適用於中國不同省份地區的資料展示工具，其實就是Leaflet上面的一個例項，只不過我將其特殊化為了中國區域的圖罷了。如果你有其他需求的話請參考Leaflet中國區域圖方法：

dvmap.setChinaJson(color_function,infomation_function,arr)

一共需要三個引數，其中第三個其實就是Legend需要的那個陣列，前兩個則是函式，分別是「顏色」和「顯示資訊」函式。

「顏色函式」就是對於不同省份，會傳入該省份的名字，你只需要返回相應的顏色即可

「顯示資訊函式」是你滑鼠移動到不同省份的時候顯示在右上角的資料，引數同樣也是該省份的名字

舉個例子：

color_function = function(prov)
    {
        if (String(prov)==String('四川'))
            return 'rgb(255,0,0)';
        return 'rgb(32,140,248)'
    }

即是在省份名稱是四川的時候返回紅色，其他時候返回預設顏色；效果圖：

通過這個方法你可以對不同省份的等級資料指定不同的顏色，從而達到相應的顯示效果，就像這個例子裡的美國人口圖一樣

而infomation_function(prov)則是指定不同區域顯示在螢幕右上角的訊息了，我們簡單地顯示省份名稱和該名稱的長度：

infomation_function = function(pro){
        return String(pro)+":"+ String(pro).length;
    }

實際上這個函式返回的字串是加入到innerHTML中的，所以你可以使用任意的html格式標籤使其按格式顯示更豐富的資料資料。

總結

因為Leaflet實在是異常好用，所以我只簡單封裝了其中一些東西，如果你有更深入的需要，請直接使用Leaflet，我這裡就不便使用別人的東西來借花獻佛了。