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

• 設置網格()

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.

如果將此添加到重置功能，您應該能夠使其按預期工作。