在条形图中显示值-jQuery打印水平堆叠条形图
我想在flot条形图(水平和堆叠)上显示条形内的值,如下所示:在条形图中显示值-jQuery打印水平堆叠条形图,jquery,charts,flot,stacked,Jquery,Charts,Flot,Stacked,我想在flot条形图(水平和堆叠)上显示条形内的值,如下所示: |------------------------------------------- | 5 | 1 | |------------------------------------------- | |------------------------------------ | 3 | 2 | |----
|-------------------------------------------
| 5 | 1 |
|-------------------------------------------
|
|------------------------------------
| 3 | 2 |
|------------------------------------
我看到这个帖子:
这些值仅显示在第一个堆叠条内。第二个值是当前总计,而不是当前条的对应值,例如:
|-------------------------------------------
| 5 6 | |
|-------------------------------------------
|
|------------------------------------
| 3 5 | |
|------------------------------------
有人知道这个功能的好插件吗?
另外,我想增加酒吧内的字体大小
谢谢大家!
代码如下:
<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.pie.js"></script>
<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.stack.js"></script>
<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.barnumbers.js"></script>
var data = [
{label: 'Label 1', color:"#80FF80", data: [[1,5], [2,3]]},
{label: 'Label 2', color:"#FF8080", data: [[1,1], [2,2]]}
];
//reverse data for horizontal
for (series in data){
var s = data[series];
for (i=0;i<s.data.length;i++){
var tmp = s.data[i][0];
s.data[i][0] = s.data[i][1];
s.data[i][1] = tmp;
}
}
var options = {
series: {
stack: 0,
lines: {show: false, steps: false },
bars: {
show: true,
barWidth: 0.5,
align: 'center',
horizontal: true,
showNumbers: true
},
},
yaxis: {ticks: [[1,'Category 1'], [2,'Category 2']]},
};
$.plot($("#flot-example-2"), data, options);
风险值数据=[
{label:'label 1',颜色:#80FF80',数据:[[1,5],[2,3]},
{标签:“标签2”,颜色:#FF8080,数据:[[1,1],[2,2]]
];
//水平方向的反向数据
用于(数据系列){
var s=数据[系列];
对于(i=0;i来说,flot barnumbers似乎不支持堆叠条形图。这就是值标记不正确的原因。我建议使用jqBarGraph,它是实现堆叠条形图的jQuery插件
我希望它能有所帮助。我最终决定使用它,因为它有更好的文档记录,而且运行良好!我已经更新了flot barnumbers以支持堆叠条,请参阅更新的。如果您需要任何其他功能,请给我发电子邮件或打开一个问题,我只是碰巧看到了这个问题。您能发布代码吗?抱歉,我刚刚添加了code、 谢谢!您可以在这里看到演示:第一个问题:如何设置数字格式?第二个问题:如何仅在鼠标悬停时显示这些值?谢谢