在已经引入Flot的js库基础上做如下几件事情:
第一步:需要引入jquery.flot.barnumbers.js
bundles.Add(new ScriptBundle("~/bundles/barnumbers").Include(
"~/Scripts/flot/jquery.flot.barnumbers.js"
));
第二步:在需要显示的地方加入如下的代码:
var options_Pool_Capacity = {
series: {
lines: { show: false },
stack: true,
bars: {
show: true
}
},
bars: {
lineWidth: 0,
barWidth: 1,
horizontal: true,
numbers: {
show: boolean //这里是显示数字内容的关键地方
}}
};
上面的代码把boolean设置为true,那么就会在柱状图上面显示出数字,但是比较死板,能否在已有数字基础上做些修改显示呢?看如下步骤:
第三步:修改show部分为一个想要显示控制的方法就可以了
bars: {
lineWidth: 0,
barWidth: 1,
horizontal: true,
numbers: {
show: function(s){return s+"abcd";}
}
},
这个时候在柱状图上就显示为“数字abcd",如果数字为10那么就是10abcd
效果图如下所示: