統計圖表-多變數折線圖

繪製統計圖表-多變數折線圖

「多變數折線圖」與一般之「折線圖」呈現方式與參數設定大致相同，可設定之參數請參考繪製統計圖表-折線圖，
唯其資料設定與折線樣式、配色可以陣列方式設定之，繪製出多變數折線圖。

另外，使用者亦可自訂想要之圖表標題，僅需在chartOpts統計圖表參數中增加一chartTitle參數即可。

程式碼如下：

   function init() {     

                var dataSet = new Array();

                var tmp = {

                        tableName: "3A1FA_A1B81",

                        fieldsId: [ "SRC_CNT","WS_CNT","OT_CNT"]             //以陣列填入欲呈現之欄位代碼

                };

   dataDB = new DataDB(dataSet, dataOption, CoordSystem.EPSG3826, areaSelect);

}

   function DrawStatChart(data) {                          //統計圖表繪製

           var pLine = {                                                  //建立折線圖參數設定集合

                   xAxis: XAxis.TIME,                                 //設定X軸資料類型

                   data: XAxis.SPATIAL,                            //設定繪製資料之表格及欄位

                   yMin: parseFloat(document.getElementById("Minvalue").value),         //設定Y軸最小值

                   yMax: parseFloat(document.getElementById("Maxvalue").value),        //設定Y軸最大值

                   yInterval: parseFloat(document.getElementById("interval").value),      //設定Y軸間距值

                   width: 3,                         //設定線寬

                   lineStyles: [lStyleA, lStyleB, lStyleC],           //設定折線樣式

                   color: [pColorA, pColorB, pColorC]         //設定配色

           };

           var Option = {                                                       //統計圖表參數設定

                   pLine: pLine,

                   chartTitle: "101年1月~103年12月-臺北市移民諮詢服務項目統計",  //自訂圖表標題設定

infoOpts : {                                                     //互動式視窗參數設定

                                    activateMode: $("#infoEvent").val(),

                                    infoColor: $("#infoBgColor").val(),

                                    opacity: parseInt($("#infoOpacity").val()) / 100

                          }

           };

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

           var Chart = new StatChart(containerObj, data, ChartKind.LINE, Option); //繪製統計圖表物件

           Chart.drawChart(function (result){});

   }