Flot Stacked Bar Chart и отображение значений столбцов при наведении мыши

Question

Я пытаюсь понять функциональность всплывающей подсказки в Flot, но не совсем разбираюсь в этом!

Я пытаюсь получить подсказку, которая отображает метку и значение каждого раздела гистограммы с накоплением

Может ли кто-нибудь указать мне на пример этого или предоставить код для этого?

Answer 1

Следующий код работает для моей составной гистограммы Flot, основанной на примере Flot, который показывает наведение точки данных.Хитрость в том, что значения 'item' на диаграмме с накоплением являются кумулятивными, поэтому значение 'y', отображаемое в подсказке инструмента, должно сначала вычесть точку данных для столбцов внизу.

var previousPoint = null;
$("#chart").bind("plothover", function (event, pos, item) {
    if (item) {
        if (previousPoint != item.datapoint) {
            previousPoint = item.datapoint;

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

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

Я не сделалнайдите это в документации Flot, но массив item.datapoint, похоже, содержит то, что мне нужно на практике.

Answer 2

Код выше вызвал проблемы с перерисовкой для меня.Вот улучшенный код:

var previousPoint = [0,0,0];
$("#regionsChart").bind("plothover", function (event, pos, item) {
    if (item) {
        if (previousPoint[0] != item.datapoint[0]
            || previousPoint[1] != item.datapoint[1]
            || previousPoint[2] != item.datapoint[2]
        ) {
            previousPoint = item.datapoint;

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

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

Answer 3

Решение использует tooltipOpts -> content метод с функцией обратного вызова для правильного возврата динамических данных на метку.

Я понял, что прохождение 4-гоАргумент функции обратного вызова «tooltipOpts» фактически дает вам весь объект данных, из которого построена диаграмма / график.Отсюда вы можете легко извлечь метки оси X, используя второй аргумент этой же функции в качестве индекса метки для извлечения.

ПРИМЕР:

Объект данных I 'м, передавая функцию построения графика:

[
    { data: [[1,137],[2,194],[3,376],[4,145],[5,145],[6,145],[7,146]] }
],
{
    bars: { show: true, fill: true, barWidth: 0.3, lineWidth: 1, fillColor: { colors: [{ opacity: 0.8 }, { opacity: 1}] }, align: 'center' },
    colors: ['#fcc100'],
    series: { shadowSize: 3 },
    xaxis: {
        show: true,
        font: { color: '#ccc' },
        position: 'bottom',
        ticks: [[1,'Thursday'],[2,'Friday'],[3,'Saturday'],[4,'Sunday'],[5,'Monday'],[6,'Tuesday'],[7,'Wednesday']]
    },
    yaxis:{ show: true, font: { color: '#ccc' }},
    grid: { hoverable: true, clickable: true, borderWidth: 0, color: 'rgba(120,120,120,0.5)' },
    tooltip: true,
    tooltipOpts: {
        content: function(data, x, y, dataObject) {
            var XdataIndex = dataObject.dataIndex;
            var XdataLabel = dataObject.series.xaxis.ticks[XdataIndex].label;
            return y + ' stories created about your page on ' + XdataLabel
        },
        defaultTheme: false,
        shifts: { x: 0, y: -40 }
    }
}

Гистограмма, отображаемая из вышеуказанного объекта данных:

Как вы можете видеть на предварительном просмотре изображения, логика, используемая для динамического отображения содержимого метки в реальных данных, такова:

tooltipOpts: {
    content: function(data, x, y, dataObject) {
        var XdataIndex = dataObject.dataIndex;
        var XdataLabel = dataObject.series.xaxis.ticks[XdataIndex].label;
        return y + ' stories created about your page on ' + XdataLabel;
    },
    defaultTheme: false,
    shifts: { x: 0, y: -40 }
}

Answer 4

Это то же самое, что и Томас выше, за исключением того, что я сдвинул всплывающую подсказку вверх, чтобы она не блокировала действие при наведении.

var previousPoint = [0,0,0];
$("#regionsChart").bind("plothover", function (event, pos, item) {
    if (item) {
        if (previousPoint[0] != item.datapoint[0]
            || previousPoint[1] != item.datapoint[1]
            || previousPoint[2] != item.datapoint[2]
        ) {
            previousPoint = item.datapoint;

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

            showTooltip(item.pageX, item.pageY - 35, item.series.label + " " + y.toFixed(0) );
        }
    }
    else {
        $("#tooltip").remove();
        previousPoint = [0,0,0];
    }
});