Question

此代码允许您通过突出显示选择多个条形图。如何在突出显示其他高亮显示的情况下取消选择突出显示的（取消高亮显示）条形图？

$(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

Answer 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;
            }
        }
    });

使用高亮/不突出显示条形图选择

1 个答案: