統計圖表-折線圖

繪製統計圖表-折線圖

本項目將針對統計圖表之「折線圖」呈現方式做詳細之參數設定介紹，可設定之參數說明如下：

1. xAxis X軸資料類型(必填)

設定X軸資料類型，不可與data值相同，類型有：行政區/統計區/機構別(spatial)、
統計欄位(field)、時序(time)

2. data繪製資料之表格及欄位

指定繪製資料之表格及欄位，不可與xAxis值相同，可依陣列表示

3. yMin與yMax 設定Y軸最小最大值(非必填)

自行設定Y軸最大最小值

4. yInterval 設定Y軸間距值(非必填)

自行設定Y軸間距值

5. width 折線線寬

單位為pixel，預設值為5。

6. lineStyles 折線樣式設定

折線樣式設定，以陣列方式輸入折線的樣式，預設皆為實線(SOLID)，

可設定之樣式有：實線(SOLID)、虛線(DASH)、點(DOT)。

7. color 配色設定

折線配色設定，以陣列方式輸入16進位RGB(#RRGGBB)格式之配色集合，輸出
之折線圖將依照配色集依序填入各個折線。若未設定則系統將自動進行配色。

程式碼如下：

   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: document.getElementById("lineWidth").value,                    //設定線寬

                   lineStyles: [document.getElementById("lineStyles").value],            //設定折線樣式

                   color: [document.getElementById("lineColor").value]                   //設定配色

           };

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

                   pLine: pLine

           };

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

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

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

   }