Question

我有一个Flot图表，我试图这样做，这样当你点击一个特定的图例项目时，它会使数据从图表中消失。

我在使这项工作上取得的成功有限。我已经得到了能够点击一个图例项目并删除了一个系列线，但不是这些点，而且它似乎也是错误的线条数据。

对此的任何帮助都将非常感激：）

var Graphs = function () {

return {

    //main function

    initCharts: function () {
        if (!jQuery.plot) {
            return;
        }

        function showChartTooltip(x, y, xValue, yValue) {
            $('<div id="tooltip" class="chart-tooltip">' + yValue + '<\/div>').css({
                position: 'absolute',
                display: 'none',
                top: y - 40,
                left: x - 40,
                border: '0px solid #ccc',
                padding: '2px 6px',
                'background-color': '#fff'
            }).appendTo("body").fadeIn(200);
        }

        if ($('#site_revenue').size() != 0) {
            //site revenue
            var previousPoint2 = null;
            var plot_statistics = null;
            var data = [];

            togglePlot = function(seriesIdx)
            {
              var previousPoint2 = plot_statistics.getData();
              previousPoint2[seriesIdx].lines.show = !previousPoint2[seriesIdx].lines.show;
              plot_statistics.setData(previousPoint2);
              plot_statistics.draw();
            }

            $('#site_revenue_loading').hide();
            $('#site_revenue_content').show();

            var data = [{
                label: "Gross Revenue",
                color: ['#44b5b1'],
                points: {
                    fillColor: "#44b5b1"
                },
                data: [
                    ['Sep', 264.41],
                    ['Aug', 6653.98],
                    ['Jul', 921.35],
                    ['Jun', 937.00],
                    ['May', 1839.25],
                    ['Apr', 1561.96],
                    ['Mar', 2289.62],
                    ['Feb', 2661.91],
                    ['Jan', 6021.44],
                    ['Dec', 4129.21],
                    ['Nov', 0.00],
                    ['Oct', 2865.28],
                ],
                idx:1
                    },{
                    label: "Tax",
                    color: ['#8fc2ed'],
                points: {
                    fillColor: "#8fc2ed"
                },
                data: [
                    ['Sep', 0.00],
                    ['Aug', 2865.28],
                    ['Jul', 2661.91],
                    ['Jun', 6653.98],
                    ['May', 6021.44],
                    ['Apr', 0.00],
                    ['Mar', 2289.62],
                    ['Feb', 1561.96],
                    ['Jan', 921.35],
                    ['Dec', 937.00],
                    ['Nov', 1839.25],
                    ['Oct', 4129.21]
                ],
                idx: 2
            }];

            var plot_statistics = $.plot($("#site_revenue"), data, {
                series: {
                    lines: {
                        show: true,
                        fill: 0.2,
                        lineWidth: 0,
                        fill: false,
                        lineWidth: 3
                    },
                    shadowSize: 1,
                    points: {
                        show: true,
                        fill: true,
                        radius: 4,
                        lineWidth: 2
                    },
                },
                xaxis: {
                    tickLength: 0,
                    tickDecimals: 0,
                    mode: "categories",
                    min: 0,
                    font: {
                        lineHeight: 18,
                        style: "normal",
                        variant: "small-caps",
                        color: "#6F7B8A"
                    }
                },
                yaxis: {
                    ticks: 5,
                    tickDecimals: 0,
                    tickColor: "#eee",
                    font: {
                        lineHeight: 14,
                        style: "normal",
                        variant: "small-caps",
                        color: "#6F7B8A"
                    }
                },
                grid: {
                    hoverable: true,
                    clickable: true,
                    tickColor: "#eee",
                    borderColor: "#eee",
                    borderWidth: 1
                },
                legend: {
                    show: true,
                    placement: 'outsideGrid',
                    container: $('#site_revenue_legend'),

                    labelFormatter: function(label, series){
                        return '<a href="#" onClick="togglePlot('+series.idx+'); return false;">'+label+'</a>';
                    }
                }
            });

            $("#site_revenue").bind("plothover", function (event, pos, item) {
                $("#x").text(pos.x.toFixed(2));
                $("#y").text(pos.y.toFixed(2));
                if (item) {
                    if (previousPoint2 != item.dataIndex) {
                        previousPoint2 = item.dataIndex;
                        $("#tooltip").remove();
                        var x = item.datapoint[0].toFixed(2),
                            y = item.datapoint[1].toFixed(2);
                        showChartTooltip(item.pageX, item.pageY, item.datapoint[0], '$' + item.datapoint[1]);
                    }
                }
            });

            $('#site_revenue').bind("mouseleave", function () {
                $("#tooltip").remove();
            });
        }
    }
};

}();

jQuery(document).ready(function() { 
    Graphs.initCharts(); // init index page's custom scripts
});

JSFiddle：http://jsfiddle.net/fxc4vyg3/

Answer 1

你一定很累，你只是有一个一个一个错误，你只调用了行的更新，而不是点。

 togglePlot = function(seriesIdx)
 {
   var previousPoint2 = plot_statistics.getData();
   seriesIdx--;  // ***HERE***
   previousPoint2[seriesIdx].points.show = // ***AND HERE***
   previousPoint2[seriesIdx].lines.show = !previousPoint2[seriesIdx].lines.show;
   plot_statistics.setData(previousPoint2);
   plot_statistics.draw();
 }

这是固定的小提琴：http://jsfiddle.net/it_turns_out/fxc4vyg3/3/

使用jQuery Flot单击隐藏系列

1 个答案: