Flot：如何在條形圖內對數字進行樣式設置？

Question

我使用FlotCharts和它的插件flot.barnumbers（Demo）顯示圖表。

我需要顯示欄內的數字，它的工作原理。不幸的是，我不知道如何設置數字的樣式，並且無法在Google文檔或Google中找到任何內容。

我想使用類似（顯然是不可能的）：

bars: { 
    numbers: { 
     numberFormatter: function(v, bar) { 
      return '<div class="pimp-my-number-class">'+ v +'</div>';    
     } 
    } 
} 

有沒有人有一個想法，如何解決這個問題？

提前致謝！

Answer 1

關於flot最好的事情之一是它提供了基本知識，然後讓你走出困境。 Here's a quick code example where I've implemented this myself (ie no plugins).它短而甜，你可以完全控制外觀。

$(function() { 

    dsHook = function(plot, canvascontext, series){ 
     for (var i = 0; i < series.data.length; i++){ // loop the series 
      var offset = plot.offset(); // offset of canvas to body 
      var dP = series.data[i]; // our data point 
      var pos = plot.p2c({x: dP[0], y: dP[1]}); // position of point   
      var barWidth = plot.p2c({x: dP[0]+series.bars.barWidth, y: dP[1]}).left - pos.left; // calc width of bar 
      pos.left += offset.left; pos.top += offset.top; //adjust position for offset 
      var aDiv = $('<div></div>').css({'width':barWidth, 'background-color':'green','color':'white','text-align':'center','position':'absolute','left': pos.left,'top':pos.top}).text(dP[1]).appendTo("body"); // add an absolute div with the number 
     } 
    } 

    var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]]; 

    somePlot = $.plot("#placeholder", [{ 
      data: d2, 
      bars: { show: true } 
     }], 
     { hooks: { drawSeries: [dsHook] } } 
    ); 
}); 

Answer 2

flot.barnumbers不支持所插入數字的樣式。 你必須自己添加到代碼中。 看看Drawing text using a canvas。

Answer 3

我會嘗試使用here之類的註釋和實際系列背後的第二個數據系列的組合來實現您所需的佈局。第二個系列應該與您的原始系列具有相同的x值。爲相應的y值添加一個常數（例如2）。

您可以根據需要設計註釋和第二個系列的樣式。這個煩人的部分是將註釋放在正確的位置。