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