繪製類型設定

繪製類型設定

統計地圖API可將匯入之各種統計資料繪製成「統計地圖」與「統計圖表」兩種繪製類型，
其中統計地圖之呈現方式又可細分為「面量圖」、「柱狀圖」、「圓餅圖」及「分級符號圖」；
統計圖表則可分為「折線圖」、「柱狀圖」以及「圓餅圖」。

在此「繪製類型設定」中，將詳述如何設定「統計地圖與圖表參數設定」及統計地圖與統計圖
表各種不同呈現方式之參數設定。

不論繪製統計地圖或是統計圖表物件時，其參數組成皆為：

StatMap/ StatChart (object containerObj, [DataDB/DataOwn] dataobj, 
string mapKind/ chartKind, MapOptions mapOpts/ chartOpts)

兩物件之參數組成類型相同，有輸出互動式地圖介面(containerObj)、統計資料來源設定
(dataobj)、繪製類型設定(mapKind/chartKind)與其他參數設定(mapOpts/ chartOpts)。
其中dataobj已在資料來源設定中詳細說明其設定，containerObj 在匯出互動式網頁介面中
說明設定，mapKind與chartKind亦會在此項目下，依不同之呈現方式詳加說明

而關於其他參數設定(mapOpts/ chartOpts)中，基本設定有指定影像之寬高尺寸、互動式訊息
視窗客製化參數與不同繪製類型之參數設定。

以繪製統計地圖分級符號圖為例，其mapOpts物件程式碼如下:

           var option = {

                   size: {height:pHeight, width:pWidth},

                        //指定地圖影像的影像寬高尺寸

                             pHeight與pWidth各表示為影像之高和寬尺寸變數

                   useBasemap: document.getElementById("BaseMap").checked,

                   //指定地圖影像是否要加上行政區底圖(限統計地圖)

              exportImage: true,                                        //輸出純影像統計圖

              baseLevel: BaseLevel.COUNTY,                   //預設底圖層級

                   pSymbol: pSymbol,                                     //分級符號圖參數設定集合

opacity: document.getElementById("MapOpacity").value,            //統計地圖透明度設定

                   infoOpts: {                                                      //訊息視窗內容設定

                           activateMode: pMapActivate,             //觸發效果

                           infoColor: document.getElementById("MInfoColor").value,    //背景色

                           opacity: document.getElementById("MInfoOpacity").value     //透明度

                   }

           };

var containerObj = document.getElementById("MapView");  //指定互動式介面的DIV ID

           var Map = new StatMap(containerObj, data, MapKind.SYMBOL, option); 
      //繪製統計地圖物件

以統計圖表柱狀圖為例，其ChartOpts物件程式碼如下:

           var option = {

                   size: {height: pHeight, width: pWidth},                       //指定圖表影像的影像寬高尺寸

                   exportImage: true,                                                        //輸出純影像統計圖

                   pBar: pBar,

                   infoOpts:{                                                                       //訊息視窗內容設定

                   activateMode: pChartActivate,                                                   //觸發效果

                           infoColor: document.getElementById("CInfoColor").value,   //背景色

                           opacity: document.getElementById("CInfoOpacity").value    //透明度

                   }

           };

           var containerObj = document.getElementById("ChartView");      //指定互動式介面的DIV ID

           var chart = new StatChart(containerObj, data, ChartKind.BAR, option);

           //繪製統計圖表物件