Stacked Bar Flot Chart - 每个Stacked Bar系列内的标签

时间:2014-12-11 12:50:17

标签: javascript jquery flot bar-chart stacked-chart

我正在使用Flot Stacked Bar,我正试图在条形图的每个系列上显示文字,所以它就像你在图像中看到的那样: - 请问你看看我的代码。

非常感谢,

image 这是我的代码:

 <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"
    }
    }
    });

0 个答案:

没有答案