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

Question

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

我进行了很多研究，并了解到通过这种方法，我的代码中的代码将无法运行。那么我可以让它工作，我该怎么办？我已经尝试了很多东西。我不明白如何在我的所有系列中调整渲染文本。

我想将 VALUE 设置为条形的 RIGHT，以及始终位于条形左侧的 SERIES（在我的情况下为 bar1、bar2、bar3）的值。如图所示。

这是我的代码：

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

更新

小于30的时候，所以出现。

小于 30 时，"bar" 且值必须在 bar 之外。

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

感谢您的帮助，非常少的 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/

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