使用資料服務平台統計資料

使用資料服務平台統計資料繪製時序地圖

 

本範例示範如何使用社會經計資料服務平台之統計資料繪製出時序統計地圖，分級方式選擇使用
自訂間距，並搭配統計地圖之面量圖進行繪製；或者選擇輸出為統計柱狀圖表，設定最大柱高及
柱寬，以及顏色即可繪出，若沒設定顏色的話則代入系統預設之顏色陣列。您可以直接將本範例
複製至您的網站伺服器，再修改使用統計資料項目或統計地圖/圖表類型即可快速建立一個頁面。

 

版型設定部分：

所有進階範例的版型皆以CSS文件(sample.css)進行設定，其詳細說明可參考進階範例「自應用
資料庫繪製地圖及圖表」中的「使用資料服務平台統計資料」。使用者可透過修改此檔案來更改範例
範例版型中各個區塊的樣式設定。

 

程式設計部分：

使用者需注意範例中欲繪製之資料項目，其選項中的value值需填入正確的統計資料表代碼、欄
位代碼以及時間代碼，縣市項目亦是如此。

 

<td class="items_content">主題選擇：</td>

<td>

     <select id="sTable" class="items_selectOption"disabled>

             <option value=" ">全國雨水下水道系統規劃實施概況統計</option>

     </select>

</td>

 

<td class="items_content" valign="top">使用統計欄位：</td>                           

<td>

        <select id="sField" size="1" multiple disabled>

             <option value="fld0401" selected>下水道實施率</option>

     </select>

</td>

 

<td class="items_content" valign="top">選擇時序年度：</td>                           

<td>

        <select id="timeSeries" size="2"style="width:100px;"  onchange="changeStatTime();" 
                          multiple>

                 <option value="100Y" selected>100年</option>        

                 <option value="101Y" selected>101年</option>                                                            

     </select>

</td>

 

若使用者覺得目前系統預設之分級方式不符合需求，可將分級方式選擇為「自訂間距」，使用者只
需在分類法選項中新增一選項，並在分級數中由小至大依序於陣列內輸入分級區間，設定方式如下：

 

<td class="items_content">分級法：</td>                           

<td>

        <select id="pClassify" class="items_selectOption"onchange="changeClassify(this.value);">

         <option value="EI">等距法</option>                              

         <option value="SELF" selected>自訂間距</option>

        </select>

</td>

   </tr>

   <tr>

<td class="items_content" valign="top">分級數：</td>        

<td >

       <select id="pClassesCount"class="items_selectOption" style="display:none;">                                       

       </select>

<input type="text" id="pClassesCount_Self"class="items_selectOption"value="50,60,70,80,90,100"/>
    <br />

    <span style="display:none;color:#CD3700;font-size:10px;" id="Classify_Self_Demo">

                 由小至大依序於陣列內輸入分級區間<br />例：輸入100, 300, 700, 900

    </span>

</td>

</tr>

 

當網頁使用者點擊「繪製統計地圖」按鈕時，程式端即進入function drawStatMap( )內進行一
系列的動作，包含從網頁介面取得各種資料設定、繪圖參數設定等等，再將所有設定套入統計地
圖物件設定內容後進行統計地圖繪製作業，最後將互動式介面輸出至網頁的展示區域內，並寫出
所需的統計資訊。

 

function drawStatMap() {               //統計地圖繪製

document.getElementById("mapView").style.display ="";

document.getElementById("chartView").style.display ="none";

 

        setStatData(myMap.getStatData());            //設定統計資料

        myMap.getStatData().select.districtType = "";

        myMap.getStatData().select.districtCode = regionCode;

        var mapOpts = myMap.getMapOptions();      //取得統計地圖參數設定

        mapOpts.pChoropleth.classifyMethod = document.getElementById("pClassify").value;
         //重新設定分級方式

        mapOpts.pChoropleth.classes = parseInt(document.getElementById("pClassesCount").value);

         //重新設定分級數

        if (document.getElementById("pClassify").value == ClassifyMethod.USER_DEFINED) {

                if(document.getElementById("pClassesCount_Self").value =="") {

                    alert("自訂區間必須填入值");

                    return;

            } else {

                    mapOpts.pChoropleth.userLevels = document.getElementById 
                                ("pClassesCount_Self").value.split(",");

                }

         }

        mapOpts.pChoropleth.statTime = document.getElementById("sTime").value;  //設定時間資訊

        mapOpts.pChoropleth.color = {                                           //重新設定面量圖配色

                maxColor: document.getElementById("maxColor").value,

                minColor: document.getElementById("minColor").value,

                defaultColor: document.getElementById("defaultColor").value

        };

        myMap.drawMap(function (result) {                //繪製統計地圖

                if (result.status === ServiceStatus.OK)

                    putInfomation(result);                    //寫出統計資訊及圖例資訊

        });

}

 

當網頁使用者點擊「繪製統計圖表」按鈕時，同樣程式即進入function drawStatChart( )內執行
統計圖表繪製作業，取得所有設定參數後，套用設定參數並將成果輸出至展示區域內。

 

function drawStatChart() {              //統計圖表繪製

         document.getElementById("mapView").style.display ="none";

         document.getElementById("chartView").style.display ="";

         

       setStatData(myChart.getStatData());         //設定統計資料

document.getElementById("downloadBtn").style.right = "10px";

myChart.getStatData().select.districtType = DistrictType.COUNTY;

    

         var chartOpts = myChart.getChartOptions();         //取得統計圖表參數設定

         chartOpts.pBar.maxHeight = parseInt(document.getElementById("chartMaxHeight").value);

         chartOpts.pBar.barWidth = parseInt(document.getElementById("chartBarWidth").value);

          //重設柱狀圖最大柱高及柱寬

         if (document.getElementById("pieColorList").value !="")

                chartOpts.pBar.color = document.getElementById("pieColorList").value.split(",");

                //重設柱狀圖配色

         myChart.drawChart(function (result) {              //繪製統計圖表

               if (result.status === ServiceStatus.OK)

                    putInfomation(result);            //寫出統計資訊及圖例資訊

         });

}

 

關於統計柱狀圖之橫軸資料標記，使用者可在chartOpts統計圖表參數設定中之各圖表參數集合
中進行設定，以柱狀圖為例，柱狀圖之參數設定集合為pBar，詳細說明可參考基本範例中之「繪
製統計圖表-柱狀圖」。

 

     var pBar = {

                xAxis: XAxis.SPATIAL,                    //以行政區作為柱狀圖橫軸標記

                maxHeight: 300,

                barWidth: 10,

                color: []

        };