Flot图表：使用图例打开/关闭系列

Question

我希望能够使用flot图表的图例来打开/关闭我的图表系列。我在flot网站上找到了示例，并使用API中的Turning series on/off和Labelformatter构建了我现在拥有的内容。我可以在图例元素旁边放置复选框，并为它们添加点击事件，它会触发。但这会再次调用绘图函数并重置我的复选框值。我已经包含了完整的jquery函数，抱歉它有点长。

<script id="source">
var jsonPath = "JsonPriceHistory/" + getParameterByName("CardId")



$(function () {
    $.getJSON(jsonPath, function (results) {

        results = [{ "label": "A", "data": [[1290115114240, 0.7000], [1289396258877, 0.7000], [1289394738247, 0.7000], [1288482602563, 0.7000], [1288479321830, 0.7000], [1288464257267, 0.7000], [1288463414413, 0.7000], [1268440264933, 1.0000], [1268434766653, 1.0000], [1268059707567, 1.0000], [1265934534340, 1.0000]] }, { "label": "B", "data": [[1290115102033, 6.0000], [1289395956947, 6.0000], [1289394743117, 6.0000], [1288482613967, 6.0000], [1288479332767, 6.0000], [1288464270420, 6.0000], [1288463427313, 6.0000], [1268440276413, 6.0000], [1268434778203, 6.0000], [1268059732683, 6.0000], [1265934545390, 6.0000]] }, { "label": "C", "data": [[1290115034640, 0.3000], [1289397347113, 0.3000], [1289396593083, 0.3000], [1289395047560, 0.3000], [1288484556080, 0.3000], [1288482794357, 0.3000], [1288465863503, 0.3000], [1288465248087, 0.3000], [1288464674300, 0.3000], [1268470601960, 0.6000], [1268469438957, 0.6000], [1268468281610, 0.6000], [1268440646800, 0.6000], [1265984810360, 0.8000], [1265955747730, 0.8000]] }, { "label": "C", "data": [[1290115031727, 0.1200], [1289397678960, 0.1200], [1289397337040, 0.1200], [1289396577510, 0.1200], [1289395024607, 0.1200], [1288484550417, 0.1200], [1288482780457, 0.1200], [1288465846327, 0.1200], [1288465231287, 0.1200], [1288464658213, 0.1200], [1268470586860, 0.2000], [1268469423697, 0.2000], [1268468266277, 0.2000], [1268440631390, 0.2000], [1265984774793, 0.2000], [1265955732580, 0.2000]] }, { "label": "D", "data": [[1290114958773, 0.0500], [1289397467207, 0.0500], [1289396747243, 0.0500], [1289395166640, 0.0500]] }, { "label": "E", "data": [[1290114933540, 0.6500], [1289397579447, 0.6500], [1289397242333, 0.6500], [1289396486657, 0.6500], [1289395003947, 0.6500], [1288484568590, 0.6500], [1288482784747, 0.6500], [1288465893750, 0.6500], [1288465278320, 0.6500], [1288464705170, 0.6500], [1268470629373, 0.6500], [1268469467810, 0.6500], [1268468309513, 0.6500], [1268440674610, 0.6500], [1265984889857, 0.6500], [1265955775453, 0.6500]] }, { "label": "F", "data": [[1290114885570, 0.1100], [1289396731507, 0.1100], [1289395170397, 0.1100]]}];

        var options = {
            legend: {
                show: true,
                container: $("#overviewLegend"),
                labelFormatter: function (label, series) {
                    var cb = '<input type="checkbox" name="' + label + '" checked="checked" id="id' + label + '"> ' + label;
                    return cb;
                }
            },
            series: {
                points: { show: true },
                lines: { show: true }
            },
            grid: { hoverable: true },
            xaxis: {
                mode: "time",
                minTickSize: [1, "day"],
                max: new Date().getTime()
            },
            yaxis: {
                mode: "money",
                min: 0,
                tickDecimals: 2,
                tickFormatter: function (v, axis) { return "$" + v.toFixed(axis.tickDecimals) }

            }
        };

        var i = 0;
        $.each(results, function (key, val) {
            val.color = i;
            ++i;
        });

        var choiceContainer = $("#overviewLegend");

        function plotAccordingToChoices() {
            var data = [];
            alert('hi');

            choiceContainer.find("input:checked").each(function () {
                var key = $(this).attr("name");
                if (key && results[key])
                    data.push(results[key]);
            });

            $.plot($("#placeholder"), results, options);
            choiceContainer.find("input").click(plotAccordingToChoices);
        }



        var previousPoint = null;
        $("#placeholder").bind("plothover", function (event, pos, item) {
            $("#x").text(pos.x.toFixed(2));
            $("#y").text(pos.y.toFixed(2));

            if (item) {
                if (previousPoint != item.datapoint) {
                    previousPoint = item.datapoint;

                    $("#tooltip").remove();
                    var x = item.datapoint[0].toFixed(2),
                y = item.datapoint[1].toFixed(2);

                    showTooltip(item.pageX, item.pageY, item.series.label + " $" + y);
                }
            }
            else {
                $("#tooltip").remove();
                previousPoint = null;
            }
        });

        function showTooltip(x, y, contents) {
            $('<div id="tooltip">' + contents + '</div>').css({
                position: 'absolute',
                display: 'none',
                top: y + 5,
                left: x + 15,
                border: '1px solid #fdd',
                padding: '2px',
                'background-color': '#fee',
                opacity: 0.80
            }).appendTo("body").fadeIn(200);
        }

        plotAccordingToChoices();
    })



});

- Matt Heffernan

---

你能否提供一个jsFiddle的演示链接，这样我可以直接在你的代码上工作吗？ - Kieran

试一下这个 http://jsfiddle.net/6FLsM/ - Matt Heffernan

请参考以下链接：https://dev59.com/h1LTa4cB1Zd3GeqPWgni - ericslaw

Answer 1

你的代码存在一些问题：

你使用的数据是一个数组形式，而演示中展示的数据是一个对象。这里的区别很重要，因为你复制了他们的代码，但没有改变代码以适应这一点。有问题的行是：

if (key && results[key])
    data.push(results[key]);

在plotAccordingToChoices()函数内部。在你的情况下，results[key]是行不通的，因为key需要是一个数字值，但这里的key是一个字符串。解决方案是用一个for循环来搜索正确的标签：

for (var i = 0; i < results.length; i++) {
    if (results[i].label === key) {
        data.push(results[i]);
        return true;
    }
}

接下来，问题是你一遍又一遍地重新绘制相同的数据，使用这行代码：

$.plot($("#placeholder"), results, options);

results[] 没有改变 - 在这里应该使用 data[]。

$.plot($("#placeholder"), data, options);

然后，与演示不同，您决定在绘制图形时使用legend选项中的formatlabel函数来设置复选框。问题在于，当您使用不包含所有结果的新数据重新绘制图形时，未绘制线条的复选框将不会显示出来，因为flot不会绘制不存在线条的标签。

这意味着您需要像演示那样单独创建复选框。我们通过向用于修复每行使用的颜色的$.each循环中添加以下行来实现：

l = val.label;
var li = $('<li />').appendTo(choiceContainer);

$('<input name="' + l + '" id="' + l + '" type="checkbox" checked="checked" />').appendTo(li);
$('<label>', {
    text: l,
    'for': l
}).appendTo(li);

这将为results数组中的每组数据创建一个复选框-标签集。最后，我们将绑定plotAccordingToChoices函数到每个复选框之外的函数中，以便绑定仅发生一次，以防止多次绑定和结果混乱：

choiceContainer.find("input").change(plotAccordingToChoices);

我们还将它更改为使用change事件而不是click，因为这里change更为合适。

最后，作为一个奖励，我们循环遍历图例表格并从中提取颜色以添加到复选框列表中：

$('.legendColorBox > div').each(function(i){
    $(this).clone().prependTo(choiceContainer.find("li").eq(i));
});

我们还需要一点CSS才能让这个工作起来：

#overviewLegend li > div {
    display: inline-block;
    margin-right: 4px;
}

点击以下链接查看最终可用的代码：http://jsfiddle.net/yijiang/6FLsM/2/

- Yi Jiang

---

非常感谢您的帮助，这是我第一个真正使用jQuery或Flot的项目。我主要从事ASP.NET/C#开发工作。 - Matt Heffernan

如何在画布内获取复选框（与图例在同一列）？ - Thusitha Sumanadasa

可以使用彩色框代替添加复选框吗？ - shorif2000