Flot Stacked Bar Chart並在鼠標懸停時顯示條形圖值

Question

我正在嘗試了解Flot的工具提示功能，但並沒有真正了解它！

我正在嘗試實現一個工具提示，顯示堆積條形圖的每個部分的標簽和值

有人能夠指出我的一個例子或提供代碼嗎？

Answer 1

以下代碼適用於我的Flot堆積條形圖，基於顯示數據點懸停的Flot示例。 訣竅是堆積圖表中的“項目”值是累積的，因此工具提示中顯示的“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

這與上面的Thomas相同，只是我將工具提示向上移動以防止它阻止懸停操作。

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

Answer 4

解決方案是使用tooltipOpts - > content方法和回調函數來正確地將動態數據返回到標簽。

我發現將第四個參數傳遞給“tooltipOpts”的回調函數實際上會為您提供構建圖表/圖形的整個數據對象。 從這里，您可以使用與要提取的標簽的索引相同的函數的第二個參數輕松提取X軸標簽。

例：

我傳遞給繪圖函數的數據對象：

[
    { 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 }
}