jQuery Flot 清除选择

Question

好吧，我很确定一旦我开始使用 Flot，演示页面上的“清除选择”按钮就会起作用，http://people.iola.dk/olau/flot/examples/selection.html 。它对你们中的任何人有用吗？我在 IE 7/8 和 Firefox 中尝试过。

我只是在尝试在我的图表中实现相同的功能时才注意到这一点，但无法使其工作，结果发现示例在演示页面上不起作用......

这是我的代码:

$.post(applicationPath + "graph/" + action,
    function (data)
    {
        var graphOptions = {
            xaxis: {
                mode: 'time',
                timeformat: "%m/%d/%y"
            },
            yaxis: {
                tickDecimals: 0
            },
            legend: {
                show: true,
                container: $('.legend')
            },
            series: {
                points: { show: true },
                lines: { show: true }
            },
            grid: {
                hoverable: true,
                clickable: true
            },
            selection: {
                mode: "xy"
            }
        };

        // hard-code color indices to prevent them from shifting as
        // series are turned on/off
        var i = 0;
        $.each(data, function (key, val)
        {
            val.color = i;
            i++;
        });

        var optionsContainer = $('.module.graph .options-menu');

        $.each(data, function (key, val)
        {
            optionsContainer.append('<li><input type="checkbox" name="' + key + '" checked="checked" id="id' + key + '">' + val.label + '</li>');
        });

        $('.module.graph .header .options').optionsMenu(
        {
            sTarget: '.options-menu',
            fnCheckboxSelected: function (index, name)
            {
                $.plot(data, optionsContainer, graphOptions);
            },
            fnCheckboxDeselected: function (index, name)
            {
                $.plot(data, optionsContainer, graphOptions);
            }
        });

        var dataSet = [];

        optionsContainer.find('input:checked').each(function ()
        {
            var key = $(this).attr('name');

            if (key && data[key])
            {
                dataSet.push(data[key]);
            }
        });

        var previousPoint = null;
        var graphContainer = $('.graph #graph-container');

        graphContainer.bind('plothover', function (e, pos, item, ranges)
        {
            if (item)
            {
                if (previousPoint != item.datapoint)
                {
                    previousPoint = item.datapoint;

                    $('#tooltip').remove();

                    var xFormatted = new Date(item.datapoint[0]).toDateString();
                    var x = item.datapoint[0].toFixed(2);
                    var y = item.datapoint[1].toFixed(2);

                    showGraphToolTip(item.pageX, item.pageY, item.series.label + " of " + y + " on " + xFormatted);
                }
            }
            else
            {
                $('#tooltip').remove();
                previousPoint = null;
            }
        });

        graphContainer.bind('plotselected', function (event, ranges)
        {
            if (ranges.xaxis.to - ranges.xaxis.from < 0.00001)
            {
                ranges.xaxis.to = ranges.xaxis.from + 0.00001;
            }
            if (ranges.yaxis.to - ranges.yaxis.from < 0.00001)
            {
                ranges.yaxis.to = ranges.yaxis.from + 0.00001;
            }

            $.plot(graphContainer, dataSet,

                $.extend(true, {}, graphOptions,
                {
                    xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to },
                    yaxis: { min: ranges.yaxis.from, max: ranges.yaxis.to }
                })
            );
        });

        var graph = $.plot(graphContainer, dataSet, graphOptions);

        $('#clearSelection').click(function ()
        {
            graph.clearSelection();
        });
    },
    "json"
);

我真的看不出我的代码有什么问题，因为它实际上是 Flot 示例的复制和过去，但是这里有什么明显的地方吗？

此外，Flot 是否存在可能的错误？清晰选择演示适合您吗？

Answer 1

来自flot.googlecode.com

• setupGrid()

Recalculate and set axis scaling, ticks, legend etc.

Note that because of the drawing model of the canvas, this
function will immediately redraw (actually reinsert in the DOM)
the labels and the legend, but not the actual tick lines because
they're drawn on the canvas. You need to call draw() to get the
canvas redrawn.

如果您将其添加到重置功能中，您应该能够使其按预期工作。