我正在使用 Flot Stacked Bar 并且我正在尝试在条形图的每个系列上显示文本,因此它应该类似于您在图像中看到的那样:- 请您看看我的代码。
非常感谢,
这是我的代码:
<script src="../../js/jquery.flot.js"></script>
<script src="../../js/jquery.flot.resize.js"></script>
<script src="../../js/jquery.flot.stack.js"></script>
<div id="placeholder" style="width:600px;height:300px;"></div>
var data = [
{label: 'foo', color:'red', data:[[1,<?php echo $red; ?>]]},
{label: 'bar', color:'blue', data:[[1,<?php echo $blue; ?>]]},
{label: 'baz', color:'green', data:[[1,<?php echo $green; ?>]]},
];
$.plot($("#placeholder"), data, {
series: {
stack: 1,
bars: {
show: true,
lineWidth: 1,
barWidth: 0.8,
order: 1,
fill: true,
label: {
show: true,
radius:0.7,
formatter: function(label, series) {
var result =[ <?php echo $red; ?> ,<?php echo $blue; ?> ,<?php
echo $green; ?>
];
if ( label == "red")
{
return '<div style="font-size:13px; text-align:center; left:-340px; top:-338px;
position:absolute; color:white;">'+label+'<br/>'+(result[0])+'</div>';
}
else if (label == "Blue")
{
return '<div style="font-size:13px; text-align:center; left:-343px; top:-228px;
position:absolute; color:white;">'+label+'<br/>'+(result[1])+'</div>';
}
else if (label == "green")
{
return '<div style="font-size:13px; text-align:center; left:-325px; top:-220px;
position:absolute; color:white;">'+label+'<br/>'+(result[2])+'</div>';
}
},
background: {
opacity: 0.8,
}
}
},
yaxis : {
min : 0,
tickLength: 0
} ,
xaxis: {
tickLength: 0,
axisLabel: "Date",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Arial',
axisLabelPadding: 3,
color: "#838383",
timeformat: "%b/%y"
}
}
});