在堆叠条形图上显示标签

Displaying Labels on Stacked Bar

本文关键字：显示 标签 条形图      更新时间：2023-09-26

我想在每个堆叠条上显示标签，例如蓝色条形图上的蓝色条形图，黄色条形图上的黄色条形图等。这是我在JSFiddle中的代码：

 [1]:http://jsfiddle.net/Sa_2019/n7r57pv7/

这是我的代码： 

 <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
    },
    yaxis : {
        min : 0,
        tickLength: 0
    } ,
    xaxis: {
    tickLength: 0,
    axisLabel: "Date",
    axisLabelUseCanvas: true,
    axisLabelFontSizePixels: 12,
    axisLabelFontFamily: 'Arial',
    axisLabelPadding: 3,
    color: "#838383",
    timeformat: "%b/%y"
     }
    }
   });

请有任何想法。

谢谢

您可以使用 Highcharts 的 dataLabels 来解决这个问题。 代码将像：-

   plotOptions: {
            column: {
                stacking: 'normal',
                  dataLabels: {
                     enabled: true,
                     color: 'white', 
                          formatter: function () {
                                  //  return the value you want to show on labels.. depends on your data ...
                           console.log(this)
                          }
                  }
            }
   }

您可以参考这样的东西...据了解，我已经添加了字符串"随机"，只是根据您的逻辑进行更改..

http://jsfiddle.net/n1mcs4d1/

相关文章：