Question

用同样的问题花了很长时间，如果我能提供帮助，我也很感激。

我研究了很多并且理解通过这种方法我在我的代码中不会运行。然后我可以让它工作，我该怎么办？我尝试了很多东西。我不明白如何在我的所有系列中改编渲染文本。

我想将值设置为条形的右边，以及始终位于条形左侧的SERIES（在我的情况下为bar1，bar2，bar3）的值。就像它在图片中一样。

这是我的代码：

plotOptions: {
 bar: {
 dataLabels: {
   padding: 0,
   allowOverlap: true,
   enabled: true,
   align: 'left',
   color: '#FFFFFF',
   inside: true,
   crop: false,
   overflow: "none",
   formatter: function() {            
      return this.series.name + " " + this.y;                       
    },
  style: {
  width:100
 }                       
. 
.
.

更新

当它小于30时，它就会出现。

当它小于30时，“bar”并且该值必须在条形之外。

当值为0时，我想显示在“bar”的右侧。

我很感谢帮助，非常小的css和这个库。我仍然无法使用。

Answer 1

您可以使用dataLabels格式化程序执行此操作： http://api.highcharts.com/highcharts#plotOptions.area.dataLabels.formatter

      formatter: function() {
        var string = this.series.name + ' ';
        if (this.y <= 30) {
          string += this.y;
        }
        return string;
      },

在这里，您将有两个可能的dataLabels字符串，具体取决于您的点值。

您可以使用Renderer.text添加负责在图表中添加第二个dataLabel的自定义函数： http://api.highcharts.com/highcharts#Renderer.text

  var addSecondLabel = function(chart) {
    $('.labelText').remove();
    var series = chart.series,
      dataLabel, barHeight;
    Highcharts.each(series, function(ob, j) {
      Highcharts.each(ob.data, function(p, i) {
        if (p.y > 30) {
          barHeight = p.graphic.element.height.animVal.value;
          dataLabel = p.dataLabel;
          chart.renderer.text(p.y, dataLabel.x + chart.plotLeft + barHeight, dataLabel.y + chart.plotTop + 11).attr({
            zIndex: 100
          }).addClass('labelText').css({
            "color": "contrast",
            "fontSize": "11px",
            "fontWeight": "bold",
            "textShadow": "0 0 6px contrast, 0 0 3px contrast"
          }).add();
        } else if (p.y > 0) {
          barHeight = p.graphic.element.height.animVal.value;
          dataLabel = p.dataLabel;
          p.dataLabel.translate(dataLabel.x + barHeight, dataLabel.y);
        }
      });
    });
  }

这里我迭代所有点并添加第二个标签，如果我的点的值大于30.我使用此点dataLabel的x和y参数，但我需要添加chart.plotLeft和chart.plotTop因为图表plotArea不是直接在左上角。

我正在为我的标签添加类，因为我将在重绘时更改其位置，我需要删除以前的标签以添加具有新位置的标签。

如果我的观点大于0但小于30，我不会添加新标签。我只是翻译旧的，所以它可以在列的左侧。

例如： http://jsfiddle.net/pb1q9wzk/31/

Answer 2

我更新以下部分

    formatter: function() { 
                        return '<div style="position: absolute; left: 40px"> my label this in other line!<div class="row">bar1</div><div class="row">bar2</div><div class="row">bar3</div></div> <img style="height: 30px; width: 30px; margin-top: 10px"  src="https://cdn2.iconfinder.com/data/icons/free-3d-printer-icon-set/512/Plastic_model.png"></img>'  
}

http://jsfiddle.net/pb1q9wzk/21/

这有点乱，但我无法想出更好的方法。希望它有所帮助

在Highcharts中为所有类别添加文本

2 个答案: