Flot：如何在条形图中设置数字？ [英] Flot: how to style numbers within bar-charts?

问题描述

我使用的是 FlotCharts 和插件 flot.barnumbers （< a href =http://joetsoi.github.io/flot-barnumbers/ =nofollow noreferrer>演示）以显示图表。

I'm using FlotCharts and it's plugin flot.barnumbers (Demo) to display charts.

我需要在酒吧内显示数字，它的工作原理。很遗憾，我不知道如何设置数字的样式，并且无法在Google文档或Google中找到任何内容。

I need to display the numbers within the bar, it works. Unfortunately I've no idea how to style the numbers and cannot find anything in the Docs or via Google.

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

I'd like to use something like (apparently not possible):

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

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

Does anyone have an idea, how to fix this problem?

提前谢谢！

推荐答案

关于 flot 最好的东西是它提供了基础，然后走出你的方式。 这是一个快速的代码示例，我已经实现了自己（即没有插件）。您可以完全控制外观。

One of the nicest things about flot is that it provides the basics and then gets out of your way. Here's a quick code example where I've implemented this myself (ie no plugins). It's short and sweet and you have complete control over appearance.

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

这篇关于Flot：如何在条形图中设置数字？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！