如何隐藏栏但保留数据标签 HighCharts答案

【问题标题】：How to hide bar but keep datalabels HighCharts如何隐藏栏但保留数据标签 HighCharts
【发布时间】：2019-04-24 09:17:33
【问题描述】：

如何隐藏条形图但保留数据标签 HighCharts，我有 3 个条形图，

目标
实现
百分比

我应该只显示第一个和第二个栏，只有 1 个数据标签是百分比。所以我对我的代码做了一个相当大的把戏
这是示例：

var target = [50,100];
var realization = [10,40];
var percentage = [];

for(i = 0;i < target.length; i++) {
  var divide = (realization[i] / target[i]) * 100;
  if (divide == Number.POSITIVE_INFINITY || divide == Number.NEGATIVE_INFINITY || isNaN(divide)) {
    percentage.push(0);
  } else {
    percentage.push(divide);
  }
}
series: [
    {
      name: 'Target )',
      color :' #009933',
      data: target,

    },
    // i put the trick on the second series where i tricked it
    {
      name: 'Percentage',
      data: percentage,
      color :'rgba(255, 255, 255, .4)',
      showInLegend: false,
      pointWidth :1, 
      lineColor: 'transparent',
      marker: { 
        fillColor: 'transparent',
        states: {
          hover: {
              enabled: false
          }
        }    
      }
    },
    {
      name: 'Realization',
      color : '#00ff00',
      data: percentage,
    }]

看起来像这样我使用的技巧是在中间设置百分比，并将条形颜色更改为透明。
这是我期待的结果
这是我的完整代码：
https://jsfiddle.net/xanrdswq/
这只是我的临时解决方案。

【问题讨论】：

标签： javascript json highcharts

【解决方案1】：

可以使用允许绘制自定义文本的Highchart.SVGRenderer.text 方法简单地实现。可以在渲染事件回调或图表回调中添加标签（当图表宽度固定时）。

检查下面发布的代码和演示，如果您有不清楚的地方，请告诉我。

代码：

chart: {
  type: 'bar',
  events: {
    render: function() {
      const chart = this,
        xAxis = chart.xAxis[0],
        yAxis = chart.yAxis[0],
        offsetX = 5;

      let customElems = chart.customElems || [],
        y,
        x,
        element;

      if (customElems.length) {
        customElems.forEach(elem => {
          elem.destroy();
        });

        customElems.length = 0;
      }

      chart.series[0].points.forEach((point, i) => {
        x = yAxis.toPixels(point.y) + offsetX;
        y = xAxis.toPixels(point.x);

        element = chart.renderer.text(`${percentage[i]} %`, x, y).css({
          fill: '#000'
        }).add().toFront();

        customElems.push(element);
      });

      chart.customElems = customElems;
    }
  }
}

演示：

https://jsfiddle.net/BlackLabel/4pyoc2td/1/

API 参考：

【讨论】：

这是完美的解决方案。谢谢，我真的很喜欢它。我将对柱形图做同样的事情。需要了解您给我的所有 API 参考。再次感谢