javascript - float 图，使用图例打开/关闭系列

Question

我希望能够使用 float 图的图例来打开/关闭我的图表系列。我在 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();
    })



});

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 数组中的每组数据创建一个复选框 - 标签集。最后，我们将用于绑定(bind) plotAccordingToChoices 的函数移动到函数外部的每个复选框，以便绑定(bind)只发生一次，以防止多次绑定(bind)和由此产生的困惑:

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/