flot标记功能,轴没有定义?

时间:2014-09-03 14:12:57

标签: javascript flot

当我使用以下选项创建图表时,flot正确绘制图形:

var options = {
            colors: trendcolors,
            series: {
                points: {
                    show: true
                },
                lines: {
                    show: true
                }
            },
            xaxis: {
                mode: "time",
                axisLabel: "Date/Time",
                tickLength: 0
            },
            yaxis: {
                axisLabel: "Duration (Sec)"
            },
            selection: {
                mode: "x"
            },
            grid: {
                hoverable: true,
                clickable: true,
                markings: function (axes) {
                    var markings = [];
                    var date = new Date(axes.xaxis.min);
                    date.setUTCSeconds(0);
                    date.setUTCMinutes(0);
                    date.setUTCHours(0);
                    var i = date.getTime();
                    do {
                        markings.push({xaxis:{from: i, to: i + (24 * 60 * 60 * 1000) }, color: colormarking } );
                        i += ((24 * 60 * 60 * 1000) * 2);
                    } while (i < axes.xaxis.max);
                    return markings;
                }
            },
            legend: {
                labelFormatter: function(label, series) { 
                            return label + " (" + series.data.length + ")";
                        }
            }
        };

但是,当我将标记匿名函数更改为标准函数时,会发生错误并且flot无法绘制图形,因为&#39;轴&#39;没有在fMarkings线上定义。为什么是这样?有什么不同?

    var options = {
        colors: trendcolors,
        series: {
            points: {
                show: true
            },
            lines: {
                show: true
            }
        },
        xaxis: {
            mode: "time",
            axisLabel: "Date/Time",
            tickLength: 0
        },
        yaxis: {
            axisLabel: "Duration (Sec)"
        },
        selection: {
            mode: "x"
        },
        grid: {
            hoverable: true,
            clickable: true,
            markings: fMarkings(axes)
        },
        legend: {
            labelFormatter: function(label, series) { 
                        return label + " (" + series.data.length + ")";
                    }
        }
    };

顺便说一句,fMarkings在另一个js块中全局定义。

1 个答案:

答案 0 :(得分:1)

markings参数需要一个函数或数组。你正在做的是在定义你的选项对象时调用一个函数。当你在那里调用时,轴变量不存在。你需要的只是:

    grid: {
        hoverable: true,
        clickable: true,
        markings: fMarkings
    },

其中fMarkings的功能如下:

fMarkings = function(axes){
   return arrayOfMarkings
}