Flot自訂資料序列屬性

當你完成了繪製一張基本的圖表後, 相信你會想要讓這張圖表看起來更完美, 例如改變線條的顏色及寬度、更改資料點的大小及外觀等, 本章將會介紹這些參數如何設定及使用.

填充顏色、資料序列顏色

Flot提供了相當多的屬性可供設定, 我們在這裡選擇填充顏色作為範例, 下圖為加入了填充顏色的圖表
上圖的程式碼如下, 在用fillColor時, fill屬性也必須設定成true效果才會出來 
            var options = {
                series: {
                    lines: {
                        show: true,
                        fill: true,
                        fillColor: { colors: [{ opacity: 0.7 }, { opacity: 0.1}] }
                    },
                    points:{
                        show: true,
                        radius: 3
                    }
                },
                colors: ["#FF7070", "#0022FF"],
            };

            $.plot(placeholder, data, options);
fillColor屬性可設定單個顏色或是漸層色, 這個範例我們用的是漸層色, 達成漸層色有2種方式 第一個是直接指定2個顏色如下 
        fillColor: { 
            colors: ["#000", "#fff"] 
        }
另一個方式是指定opacity 
        fillColor: { 
            colors: [{ opacity: 0.7 }, { opacity: 0.1}] 
        }

資料序列屬性

以下是Flot資料序列屬性, 有興趣的可以照著以下的屬性去修改, 打造自己喜歡的圖表外觀 
        series: {
            //折線圖、點圖及直條圖
            lines, points, bars: {
                //是否顯示
                show: boolean
                //線寬
                lineWidth: number
                //是否填滿顏色
                fill: boolean or number
                //填色的顏色(可用漸層)
                fillColor: null or color/gradient

                //此屬性只有折線圖能用
                steps: boolean
            }
            //資料點
            points: {
                //資料點的半徑大小
                radius: number
                //資料點的形狀, 預設為circle
                //支援其他形狀如square、diamond、triangle、cross, 不過必須加入jquery.flot.symbol.js外掛程式才能使用
                symbol: "circle" or function
            }
            //直條圖
            bars: {
                //直條寬度
                barWidth: number
                //設置直條對齊的方向
                align: "left", "right" or "center"
                //若為true, 則以橫條圖顯示
                horizontal: boolean
            }
            //設定陰影大小
            shadowSize: number
        }

        //資料序列的顏色, 如series1對應color1, series2對應color2, 依此類推
        colors: [ color1, color2, ... ]