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

Question

我正在使用FlotCharts,它的插件flot.barnumbers(Demo)来显示图表.

我需要在栏内显示数字,它有效.不幸的是,我不知道如何设置数字样式,并且无法在文档或Google中找到任何内容.

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

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

有没有人有想法,如何解决这个问题？

提前致谢!

Answer 1

其中一个最好的事情flot是它提供了基础知识然后让你的方式. 这是一个快速的代码示例,我自己实现了这个(即没有插件). 它简短而甜美,您可以完全控制外观.

$(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] } }
    );
});