javascript - Flot:如何在条形图中设置数字样式？

我正在使用FlotCharts及其插件 flot.barnumbers (Demo)显示图表。

我需要在栏中显示数字，它可以正常工作。不幸的是，我不知道如何设置数字的样式，并且无法在文档中或通过Google找到任何内容。

我想使用类似的东西(显然不可能):

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

有谁知道如何解决这个问题？

提前致谢!

最佳答案

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