Question

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

目标
实现
百分比

我应该只显示第一个和第二个条，只有一个datalabels是百分比。所以我对我的代码做了个绝招
这是示例：

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/
这只是我的临时解决方案。

Answer 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参考：

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

1 个答案: