Flot：如何在条形图中设置数字样式？答案

【问题标题】：Flot: how to style numbers within bar-charts?Flot：如何在条形图中设置数字样式？
【发布时间】：2013-08-30 01:52:45
【问题描述】：

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

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

我想使用类似的东西（显然不可能）：

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

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

提前致谢！

【问题讨论】：

标签： javascript jquery html canvas flot

【解决方案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] } }
    );
});

【讨论】：

太好了，非常感谢！不幸的是，对于具有负值的水平图表，我也需要它。我编辑了您的小提琴，如果您再次查看并帮助我，我将不胜感激：jsfiddle.net/x4bgU/5
你成就了我的一天。非常感谢！ :-)
我有同样的要求，使用了上面的代码。但数字不会随着条形图滚动。数字是固定在页面上的。 :(我如何使它工作
@Jinxed，你能提供一个 jsFiddle 来证明你的问题吗？你到底在滚动什么？

【解决方案2】：

flot.barnumbers 不支持插入数字的样式。您必须自己将其添加到代码中。看看Drawing text using a canvas。

【讨论】：

【解决方案3】：

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

您可以随意设置注释和第二系列的样式。繁琐的部分是将注释放置在正确的位置。

【讨论】：