javascript 浮动堆积条形图并在鼠标悬停时显示条形值

Flot Stacked Bar Chart and displaying bar values on mouse over

提问by Tristan

I'm trying to understand the tooltip functionality of Flot but not really getting my head around it!

我试图了解 Flot 的工具提示功能，但并没有真正了解它！

I am trying to achieve a tooltip that displays the label and value of each section of a stacked bar chart

我正在尝试实现一个显示堆积条形图每个部分的标签和值的工具提示

Would someone be able to point my towards an example of this or provide code for doing so?

有人能指出我的例子或提供这样做的代码吗？

回答by Peter Hilton

The following code works for my Flot stacked bar chart, based on the Flot example that shows data point hover. The trick is that the 'item' values in the stacked chart are cumulative, so the 'y' value displayed in the tool tip has to first subtract the datapoint for the bars underneath.

以下代码适用于我的 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;            
    }
});

I did not find this in the Flot documentation, but the item.datapointarray seemed to contain what I needed in practice.

我在 Flot 文档中没有找到这个，但item.datapoint数组似乎包含了我在实践中需要的东西。

回答by Thomas

The code above caused redraw-issues for me. Here is an improved code:

上面的代码给我带来了重绘问题。这是一个改进的代码：

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

回答by Peter Mark

This is the same as Thomas above, except that I shifted the tooltip up to prevent it blocking the hover action.

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

回答by Aaron Marton

The solution is using tooltipOpts-> contentmethod with a callback function to properly return dynamic data to the label.

解决方案是使用带有回调函数的tooltipOpts-> content方法将动态数据正确返回到标签。

I figured out that passing a 4th argument to the callback function of the "tooltipOpts" actually gives you the whole data object from which the chart/graph is constructed from. From here, you can easily extract the X axis labels, using the second argument of this same function as the index of the label to extract.

我发现将第四个参数传递给“tooltipOpts”的回调函数实际上为您提供了构建图表/图形的整个数据对象。从这里，您可以轻松地提取 X 轴标签，使用相同函数的第二个参数作为要提取的标签索引。

EXAMPLE:

例子：

Data object I'm passing to the plot function:

我传递给绘图函数的数据对象：

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

Bar chart rendered from the above data object:

从上述数据对象呈现的条形图：

As you can see on the image preview, the logic used to render the label's content dynamically form the actual data is this:

正如您在图像预览中看到的，用于从实际数据动态呈现标签内容的逻辑是这样的：

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