切換資料序列

我們都知道當你在繪圖時, 通常會有不只一種的資料序列. 就像下方的世界人口圖一樣, 這張圖用了六個資料序列來繪製圖表.

如果一次只顯示一個資料序列在圖表上, 使用者可以很容易的判讀圖表, 但如果同時間一次把六個資料序列放在同一個圖表上時, 使用者就會很難去區別各資料序列的數值, 尤其時當圖表的線條交錯重疊在一起的時候.

雖然Flot並沒有內建的函式可供開發者能夠自由地顯示或隱藏資料序列, 但還是有其它方法可以達到相同的效果.

製作切換資料序列圖表的步驟

1. 建立資料來源
2. 建立切換控制項
3. 決定哪些資料序列需要被繪製出來

建立資料來源

在這裡我們使用之前出現在別的範例裡的區域圖作為此篇範例. 首先, 你必須先建立資料來源, 不論是寫死在程式裡, 或是更進階的你可以使用 Ajax取得資料來源都可以. 在此範例裡我們會使用前者的方法, 資料來源格式如下...

   
//Asia population data source
var rawData6 = [
    [year(1800), 63500], [year(1850), 80900], [year(1900), 94700], [year(1950), 139849], [year(1955), 154195],
    [year(1960), 167434], [year(1965), 189942], [year(1970), 214312], [year(1975), 239751], [year(1980), 263234],
    [year(1985), 288755], [year(1990), 316781], [year(1995), 343005], [year(2000), 367974], [year(2005), 391751],
    [year(2010), 411963]
];
                    

全部一共有六個資料來源, 但因為格式都相同, 所以在這裡我們省略列出其它五個資料來源.

在建立好了所有的資料來源後, 我們必須把它們全部放進一個叫做dataCollection的陣列裡, 之後我們再另外建立一個叫做labelCollection的陣列, 並且把相對應的label名稱也同時放進此陣列.

我們建立這2個陣列的原因是, 我們會一一檢查所有的checkbox控制項, 去判斷checkbox是否有被選取, 如果當屬於Asia的checkbox被選取時, 我們就會把對應到Asia的資料來源加入到另一個叫做dataSet的陣列裡去, 這個陣列的資料最後會被用來當作繪製圖表的資料用.

   
var dataCollection = [
    rawData1, rawData2, rawData3, rawData4, rawData5, rawData6
];

var labelCollection = [
    "Oceania", "North America", "Latin America", "Europe", "Africa", "Asia"
]
                    

建立切換控制項

我們在此範例使用的切換控制項是checkbox, 在你把它們加入到表單裡之後, 必須先把每一個的checked屬性設為true, 然後給予每一個checkbox的id一個流水號, 這個流水號會用來判斷要把陣列中的哪一組資料抓出來用. 舉例來說, 如果使用者選取了Oceania的checkbox, 那你就要把資料來源rawData1和label名稱"Oceania"加入dataSet陣列裡, 最後只要一直重複此相同的程序, 你就可以得到你所需要繪製圖表的資料了.

   
<ul id="ToggleController">
    <li><input id="Checkbox1" type="checkbox" checked="checked" />Oceania</li>
    <li><input id="Checkbox2" type="checkbox" checked="checked" />North America</li>
    <li><input id="Checkbox3" type="checkbox" checked="checked" />Latin America</li>
    <li><input id="Checkbox4" type="checkbox" checked="checked" />Europe</li>
    <li><input id="Checkbox5" type="checkbox" checked="checked" />Africa</li>
    <li><input id="Checkbox6" type="checkbox" checked="checked" />Asia</li>
</ul>
                    

決定哪些資料序列需要被繪製出來

現在資料來源和控制項都已經完成了, 接下來就是處理切換程序, 整個流程會像如下...

• 一一的檢查每一個checkbox去判斷是否有被選取
• 從被選取的checkbox裡取得當初設定在ID裡的流水號
• 加入跟流水號相對應的資料到dataSet陣列裡
• 重新繪製圖表

我們需要先建立一個空的陣列dataSet, 這個陣列變數會在最後用來繪製圖表之用. 接著我們檢查所有的切換控制項, 利用jQuery selector去抓取所有屬性type設定為checkbox的input元素, $("input[type='checkbox']");

因為之前我們在UL元素中加了個ID屬性進去, 主要是為了要能夠與頁面中其它的checkbox能夠區別, 所以在這裡我們必須先抓取UL元素, 然後再用$.find去抓取在其下的所有checkbox. 最後我們再用$.each去遍歷所有抓出來的checkbox.

接下來我們需要去判斷各個checkbox是否有被選取, 我們可以用is(":checked")來判斷. 如果checkbox有被選取的話, 將會回傳true值. 之後再從checkbox的ID屬性中抓流水號出來. 因為checkbox元素的程式碼是這樣的...
<input id="Checkbox6" type="checkbox" checked="checked" />

你可以先把整個ID屬性的值抓出來, 然後再移除字串'Checkbox', 剩下來的部份就會是流水號了. 而最後的步驟就只要把相對應的資料來源和label名稱從之前預設定好的陣列裡, 利用流水號抓出來, 再放進dataSet陣列中即可.

現在你就可以呼叫$.plot($("#flot-placeholder"), dataSet, options);來繪製圖表. 我們在這範例中並沒有對於options變數多做解釋是只想專注在切換資料序列上, 如果你想多了解區域圖的options變數的話你可以到如何繪製區域圖查看.

   
var dataSet = [];

$("#ToggleController").find("input[type='checkbox']").each(function () {
    if ($(this).is(":checked")) {
        var position = $(this).attr("id").replace("chkData", "");
        position = parseInt(position) - 1;

        dataSet.push(
            {
                label: labelCollection[position],
                data: dataCollection[position]
            }
        );   
    }
});

$.plot($("#flot-placeholder"), dataSet, options);
                    

要讓整個程式看起來更乾淨, 你可以把上面的公式給包進叫做DoToggling()的函式裡. 當網頁完全載入後, 先呼叫一次此函式讓圖表先顯示出來, 接著註冊click事件到所有的checkbox上, 這樣一來當使用者選取或取消選取checkbox時, 整個圖表也會跟著重繪一次.

   
function DoToggling() {
    //formula mentioned above goes here..
}                

$(document).ready(function () {
    DoToggling();

    $("#ToggleController").find("input[type='checkbox']").click(function () {
        DoToggling();
    });
});
                    

整個切換資料序列完成圖如下