Question

我想在堆叠的酒吧的每个系列上显示标签。请提出任何想法。我一直在寻找没有运气。例如，如果您有蓝色系列文本，则堆叠条的系列上将显示蓝色，依此类推。

如图所示，它应该是类似的东西：

这是我的代码： -

    <div id="placeholder" style="width:600px;height:300px;"></div>
    var data = [
    {label: 'foo', color:'red', data: [[1,300], [2,300], [3,300], [4,300], [5,300]]},
    {label: 'bar', color:'blue', data: [[1,800], [2,600], [3,400], [4,200], [5,0]]},
    {label: 'baz', color:'yellow', data: [[1,100], [2,200], [3,300], [4,400], [5,500]]},
     ];

      $.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 $yellow; ?>

            ];

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

Answer 1

您应该可以使用valuelabels插件来实现此功能。

参考：https://github.com/winne27/flot-valuelabels/wiki

下载：https://github.com/winne27/flot-valuelabels/blob/master/jquery.flot.valuelabels.js

基本示例：http://jsfiddle.net/WetNoodles/6b8n4nhe/1/

使用该插件，您可以在每个数据系列中指定这些选项：

valueLabels: { show: true, valign: 'middle' }

在栏中显示文字 - jQuery图表垂直堆积的条形图

1 个答案: