jQuery Flot очистить выбор - PullRequest
Новая
       16

jQuery Flot очистить выбор

2 голосов
/ 07 февраля 2011

Хорошо, я почти уверен, что после того, как я начал использовать 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? Демо-версия clear selection работает для вас?

1 Ответ

1 голос
/ 08 февраля 2011

С 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.

Если вы добавите это вФункция сброса, вы должны быть в состоянии заставить ее работать так, как вы ожидаете.

...