如何畫Flot多軸圖

前面的章節大多數都是只有一組資料的圖表,這個章節將會介紹多組資料的圖表,也就是多軸圖,不管是y軸的多軸圖或是x軸的多軸圖,原理都是一樣的,在建立圖表資料時就需要指定axis的序號,而在建立圖表選項時就利用該序號去建立. 這章會介紹y軸的多軸圖.

多軸圖(y軸)範例

繪圖用到的檔案

所有需要的檔案清單如下.jquery.flot.axislabels.js為軸標籤的外掛程式,jquery.flot.symbol.js為資料點符號的外掛程式.另外為了讓IE8以下版本能顯示Flot圖表,所以需要excanvas.min.js外掛程式.
 
<script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script>      
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="/js/flot/excanvas.min.js"></script><![endif]-->   
<script type="text/javascript" src="/js/flot/jquery.flot.js"></script>
<script type="text/javascript" src="/js/flot/jquery.flot.time.js"></script>
<script type="text/javascript" src="/js/flot/jquery.flot.axislabels.js"></script>
<script type="text/javascript" src="/js/flot/jquery.flot.symbol.js"></script>
        

建立資料

這個範例我們用三角函數的Sin、Cos及圓周率π來計算我們三組資料,資料格式如[x, y], x軸資料我們用流水號,而y軸資料則是用三角函數及π算出來.
 
//Sin(x)
var data1 = [
    [0, 0.09983], [1, 0.19867], [2, 0.29552], [3, 0.38942], [4, 0.47943], [5, 0.56464], [6, 0.64422], [7, 0.71736], [8, 0.78333], [9, 0.84147], [10, 0.89121], [11, 0.93204], [12, 0.96356], [13, 0.98545], [14, 0.99749], [15, 0.99957], [16, 0.99166], [17, 0.97385], [18, 0.9463], [19, 0.9093], [20, 0.86321], [21, 0.8085], [22, 0.74571], [23, 0.67546], [24, 0.59847], [25, 0.5155], [26, 0.42738], [27, 0.33499], [28, 0.23925], [29, 0.14112], [30, 0.04158], [31, -0.05837], [32, -0.15775], [33, -0.25554], [34, -0.35078], [35, -0.44252], [36, -0.52984], [37, -0.61186], [38, -0.68777], [39, -0.7568], [40, -0.81828], [41, -0.87158], [42, -0.91617], [43, -0.9516], [44, -0.97753], [45, -0.99369], [46, -0.99992], [47, -0.99616], [48, -0.98245], [49, -0.95892], [50, -0.92581]
];
//Cos(x)
var data2 = [
    [0, 0.995], [1, 0.98007], [2, 0.95534], [3, 0.92106], [4, 0.87758], [5, 0.82534], [6, 0.76484], [7, 0.69671], [8, 0.62161], [9, 0.5403], [10, 0.4536], [11, 0.36236], [12, 0.2675], [13, 0.16997], [14, 0.07074], [15, -0.0292], [16, -0.12884], [17, -0.2272], [18, -0.32329], [19, -0.41615], [20, -0.50485], [21, -0.5885], [22, -0.66628], [23, -0.73739], [24, -0.80114], [25, -0.85689], [26, -0.90407], [27, -0.94222], [28, -0.97096], [29, -0.98999], [30, -0.99914], [31, -0.99829], [32, -0.98748], [33, -0.9668], [34, -0.93646], [35, -0.89676], [36, -0.8481], [37, -0.79097], [38, -0.72593], [39, -0.65364], [40, -0.57482], [41, -0.49026], [42, -0.4008], [43, -0.30733], [44, -0.2108], [45, -0.11215], [46, -0.01239], [47, 0.0875], [48, 0.18651], [49, 0.28366], [50, 0.37798]
];
//PI * x
var data3 = [
    [0, 0.31416], [1, 0.62832], [2, 0.94248], [3, 1.25664], [4, 1.5708], [5, 1.88496], [6, 2.19911], [7, 2.51327], [8, 2.82743], [9, 3.14159], [10, 3.45575], [11, 3.76991], [12, 4.08407], [13, 4.39823], [14, 4.71239], [15, 5.02655], [16, 5.34071], [17, 5.65487], [18, 5.96903], [19, 6.28319], [20, 6.59734], [21, 6.9115], [22, 7.22566], [23, 7.53982], [24, 7.85398], [25, 8.16814], [26, 8.4823], [27, 8.79646], [28, 9.11062], [29, 9.42478], [30, 9.73894], [31, 10.0531], [32, 10.36726], [33, 10.68142], [34, 10.99557], [35, 11.30973], [36, 11.62389], [37, 11.93805], [38, 12.25221], [39, 12.56637], [40, 12.88053], [41, 13.19469], [42, 13.50885], [43, 13.82301], [44, 14.13717], [45, 14.45133], [46, 14.76549], [47, 15.07964], [48, 15.3938], [49, 15.70796], [50, 16.02212]    
];

        
接著建立叫dataset的陣列,label屬性是圖例顯示的名稱,而data屬性就設定我們上面建的資料,color屬性代表線條的顏色,這裡我們設定3種不同顏色,而points屬性代表資料點的設定,points.symbol為資料點顯示的符號,points.fillColor表示要用什麼顏色填滿,lines.show屬性表示是否要顯示線條,若為false,則不會顯示線條,我們在這裡設為true.

最後是yaxis屬性,我們分別設定為1、2及3,這屬性是為了讓後面會講到的圖表選項所使用的.
 
var dataset = [
    {
        label: "Sin(x)",
        data: data1,
        yaxis: 2,
        color: "#FF0000",
        points: { symbol: "circle", fillColor: "#FF0000", show: true },
        lines: { show: true }
    }, {
        label: "Cos(x)",
        data: data2,
        yaxis: 1,
        color: "#0062FF",
        points: { symbol: "triangle", fillColor: "#0062FF", show: true },
        lines: {show:true, fill:true}
    }, {
        label: "PI * x",
        data: data3,
        yaxis: 3,
        color: "#319400",
        points: { symbol: "diamond", fillColor: "#319400", show: true },
        lines: { show: true }
    }
];

        

建立圖表選項

因為在這個範例x軸的資料是流水號,所以顯示x軸刻度也無義意,所以我們把xaxis.ticks設定成[]空陣列後,x軸的刻度標籤就不會顯示了.
 
    xaxis: {
        ticks: []
    }
        
y軸的部份,若是只有1組資料時,選項的寫法就會用yaxis:{},但如果有多組資料時,選項的寫法就會不一樣,會變成用yaxes,如yaxes:[],2者之間的差異如下方的程式碼.
 
        //single data
        yaxis:{
            //options
        }

        //multiple datas
        yaxes: [
            { 
                //data1 options
            },{ 
                //data2 options
            },{ 
                //...
            }
        ]    
        
我們的範例有3組資料,所以我們必須用yaxes:[],陣列的第一組物件就代表第一軸心,所以我們在axisLabel設定為"Sin(x)",並且將position設定成"left",表示"Sin(x)"的刻度標籤會放在圖表左方.而color則是刻度標籤的字型顏色.另外在第三個軸心裡,我們設定了alignTicksWithAxis:2,這個屬性只有在多軸圖裡會用到,意思是將刻度對齊第二個軸心,這樣可以讓外觀看起來更整齊.
y軸選項程式碼如下.
 
    yaxes: [{
            position: "left",
            color: "black",
            axisLabel: "Sin(x)",
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial',
            axisLabelPadding: 3
        }, {
            position: "right",           
            color: "black",
            axisLabel: "Cos(x)",
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial',
            axisLabelPadding: 3
        }, {
            alignTicksWithAxis: 2,
            position: "right",
            color: "black",
            axisLabel: "PI * x",
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial',
            axisLabelPadding: 3
        }
    ]
        
我們設定了legend.noColumns為0,這樣會讓圖例顯示成一列,而legend.labelFormatter可以讓你自定圖列標籤的呈現方式,另外我們還設定了backgroundColor背景顏色和backgroundOpacity背景透明度.

網格的部份設定了grid.hoverable為true,因為我們有用到提示框功能,所以必須設定.而grid.borderWidth是設定圖表框的寬度,另外grid.mouseActiveRadius我們設定為50,表示滑鼠移到資料點上方時會觸發"plothover"事件的半徑,而grid.axisMargin則表示刻度標籤之間的間距(多個軸刻度在同一邊時才有用).
 
    legend: {
        noColumns: 0,
        labelFormatter: function (label, series) {
            return "<font color=\"white\">" + label + "</font>";
        },            
        backgroundColor: "#000",
        backgroundOpacity: 0.9,
        labelBoxBorderColor: "#000000",
        position: "nw"
    }

    grid: {
        hoverable: true,
        borderWidth: 3,
        mouseActiveRadius: 50,
        backgroundColor: { colors: ["#ffffff", "#EDF5FF"] },
        axisMargin: 20
    }
        

完成繪圖

最後我們再呼叫$.plot把上面建立的dataset以及options帶入,再呼叫UseTootip()後,整個繪圖即完成.
 
    $(document).ready(function () {
        $.plot($("#flot-placeholder"), dataset, options);
        $("#flot-placeholder").UseTooltip();
    });
        

練習

本章的完整範例程式碼可以在這裡找到並做線上練習 Go to Example Tester