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

Answer 2

flot.barnumbers不支持插入数字的样式。您必须自己将其添加到代码中。看看使用画布绘制文本。

Answer 3

我会尝试通过结合使用此处的注释和实际系列后面的第二个数据系列来实现您想要的布局。然后第二个系列应该具有与原始系列相同的 x 值。为相应的 y 值添加一个常数（例如 2）。

您可以根据需要设置注释和第二个系列的样式。繁琐的部分是将注释放置在正确的位置。