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, ... ]