Flot堆叠条形图并在鼠标上显示条形值

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

，我没有对海军报文件中发现这一点，但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

这是与上述相同的托马斯，除了予移位工具提示，以防止它阻塞悬停动作。

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 - >内容方法用的回调函数，动态数据正确地返回到标签上。

我想通过第四个参数传递给“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 } 
}