jQuery标记清晰选择

Question

好的，我很确定一旦我开始使用Flot，演示页面上的“清除选择”按钮就可以工作了，http://people.iola.dk/olau/flot/examples/selection.html。这对你们中的任何人有用吗？我尝试了IE7/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中是否存在可能的bug？清晰的选择演示对你有用吗？

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.

如果将此添加到重置函数中，则应该能够使其按预期工作。