Выбор гистограммы Flot с выделением/снятием выделения

Этот код позволяет выбрать несколько баров, выделив их. Как снять выделение с выделенного (снять выделение) столбца, оставив выделенными другие?

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


interaction jquery highlight flot
person PVL    schedule 27.02.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Поскольку Flot не предоставляет массив выделенных баров, самым простым решением было бы создать такой массив самостоятельно и проверить в функции plotclick, выделен ли уже текущий бар, и в этом случае убрать его выделение.

Обновленный код (полный код в этой обновленной скрипке):

    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;
            }
        }
    });
person Raidri    schedule 28.02.2017