【问题标题】:Displaying Labels on Stacked Bar在堆积条上显示标签
【发布时间】:2014-12-11 11:10:17
【问题描述】:

我想在每个堆叠条上显示标签,例如蓝色条上的蓝色、黄色条上的黄色等等。 这是我在 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"
     }
    }
   });

请有什么想法。

谢谢

【问题讨论】:

  • 请将解释您的问题所需的(最少)代码放入问题本身。
  • 小提琴不工作??
  • @AdrianHHH 我添加了我的代码。我想显示每个系列的标签
  • @AlokBhat 我编辑了我的问题并添加了我的代码。我想显示每个系列的标签,例如蓝色系列,它有一个带有文本“蓝色”的标签等等。

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


【解决方案1】:

您可以使用 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/

【讨论】:

  • 是否可以使用 flot Stacked Bar 来实现,因为我使用的是 flot。
  • 我对我的代码做了一些更改,但仍然无法正常工作,您可以看看jsfiddle.net/Sa_2019/e98q581L/1
  • 我对浮点数一无所知..所以无能为力..虽然我找到了这个jsfiddle.net/1a2s35m2/1
  • 您在 JSFiddle 上看到带有高图表的示例,我可以看到所有标签都有相同的文本“随机”如何更改蓝色系列的文本并再次更改黄色系列的文本?请有任何想法。
猜你喜欢
  • 1970-01-01
  • 2021-02-06
  • 2019-07-15
  • 2021-12-19
  • 1970-01-01
  • 2013-12-22
  • 1970-01-01
  • 2015-10-18
  • 1970-01-01
相关资源
最近更新 更多