带有突出显示/取消突出显示的浮动条形图选择答案

【问题标题】：Flot bar graph selection with highlight/un-highlight带有突出显示/取消突出显示的浮动条形图选择
【发布时间】：2017-07-18 11:53:50
【问题描述】：

此代码允许您通过突出显示多个条来选择它们。如何取消选择突出显示（取消突出显示）的栏，同时突出显示其他栏？

$(function() {

    var sin = [];

    for (var i = 0; i < 14; i += 1) {
        sin.push([i, Math.sin(i)]);
    }

    var plot = $.plot("#placeholder", [
        { data: sin, label: "sin(x)"}
    ], {
        series: {
            bars: {
                show: true
            },
        },
        grid: {
            hoverable: true,
            clickable: true
        },
    });

    $("#placeholder").bind("plotclick", function (event, pos, item) {
        if (item) {
            $("#clickdata").text(" - click point " + item.dataIndex + " in " + item.series.label);
            plot.highlight(item.series, item.datapoint);
        }
    });
});

这里是完整的代码：jsfiddle

【问题讨论】：

标签： jquery flot highlight interaction

【解决方案1】：

由于 Flot 不公开突出显示的条形数组，最简单的解决方案是自己创建这样一个数组，如果当前条形已经突出显示，则检查 plotclick 函数，在这种情况下，取消突出显示它。

更新代码（完整代码在此更新fiddle）：

    var highlights = {};

    $("#placeholder").bind("plotclick", function(event, pos, item) {
        if (item) {
            $("#clickdata").text(" - click point " + item.dataIndex + " in " + item.series.label);

            var indices = item.seriesIndex + '_' + item.dataIndex;
            if (highlights[indices]) {
                plot.unhighlight(item.series, item.datapoint);
                highlights[indices] = false;
            } else {
                plot.highlight(item.series, item.datapoint);
                highlights[indices] = true;
            }
        }
    });

【讨论】：