Flot堆叠条形图及鼠标悬停显示柱状值

Question

我正在尝试理解Flot的工具提示功能，但是并没有真正理解它！

我想实现一个工具提示，显示堆叠条形图每个部分的标签和值。

能否有人向我指出一个示例或提供代码？

- Tristan

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数组似乎包含了我需要的内容。

- Peter Hilton

---

showTooltip()在这里实现（查看源代码）：http://www.flotcharts.org/flot/examples/interacting/index.html - razzed

@peter 如果我想显示每个堆栈覆盖的百分比面积而不是其值，该怎么办？ - sunil

一个更通用的解决方案（适用于不止两个系列）是减去所有后续数据点，即 y = item.datapoint[1]; for ( var i = 2; i < item.datapoint.length; ++i ) y -= item.datapoint[i];。 - Frerich Raabe

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

- Thomas

Answer 3

解决方案是使用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 }
}

- Aaron Marton

Answer 4

这与上面的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];
    }
});

- PeterM