0

took a long time with this same question, then I appreciate too if I can help.

I researched a lot and understand that by this method that I have in my code will not run. then I can make it work, how I can do? I have tried many things. I do not understand how to adapt a render text or so ago all of my series.

I want to set the VALUE to RIGHT of the bar, and the value of the SERIES (in my case bar1, bar2, bar3) that are always at the LEFT of the bar. as it is in the picture.

enter image description here

this is my code:

http://jsfiddle.net/pb1q9wzk/

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
 }                       
. 
.
.

UPDATE

when it is less than 30, so it appears. enter image description here

when it is less than 30, "bar" and the value must be outside of the bar. enter image description here

and when the value is 0, I want to be displayed to the right of "bar".

enter image description here

I appreciate the help, very little css and this library. I still can not get used.

4

2 回答 2

2

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

于 2016-01-18T16:15:37.153 回答
0

我更新以下部分

    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/

这有点乱，但我想不出更好的方法来做到这一点。希望能帮助到你

于 2016-01-17T08:52:17.020 回答