Flot Stacked Bar Chart并在鼠标hover时显示条形图值

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

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

有人能够指出我的一个例子或提供代码吗？

Answer 1

以下代码适用于我的Flot堆积条形图，基于显示数据点hover的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相同，只是我将工具提示向上移动以防止它阻止hover操作。

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