如果数据标签不合适，Highcharts会动态地移动它。

Question

嗨，我正试图在每一列的顶部显示列的值，以便于用户比较值。

我已经得到了这个工作，但当一些列非常接近对方的一些值没有被dispalyed，因为我假设highcharts的工作原理是，它不适合，除非它重叠，所以它不显示的值。

下面是我的图表的代码--------

var chart_1_Options = {
    chart: {
        renderTo: 'container_chart_1',
        backgroundColor: '#FFFFFF'
    },
    credits: {
        enabled: false
    },
    title: {
        text: ''
    },
    xAxis: {
        type: 'datetime'
    },
    yAxis: {
        title: {
            text: null
        }
    },
    plotOptions: {
        column: {
            animation: false,
            borderWidth: 0,
            dataLabels: {
                enabled: true,
                formatter: function() {
                    return '<p style="font-size: 8px;">' + this.y + '% </p>';
                }
            }
        }
    },
    legend: {
        enabled: true
    }
};

以下是图表的图像，我已经圈出了缺少数值的区域。

我只是想让值显示出来，即使它不适合，我想让它把值放在列内的某个地方，如果它不能放在顶部。

谢谢你的帮助

Answer 1

我认为，你可以尝试找到这些标签，并通过做一些类似下面的代码来显示它们。

events: {
  load() {
    let chart = this;

    chart.series[0].points.forEach(p => {
      setTimeout(function() {
        if (p.dataLabel.translateY === -9999) {
          p.dataLabel.translate(p.dataLabel.alignAttr.x, p.dataLabel.alignAttr.y + 20)
          p.dataLabel.css({
            opacity: 1
          })
        }
      }, 50)
    })
  }
}

演示： https:/jsfiddle.netBlackLabelunzgsmfr

API。https:/api.highcharts.comhighchartschart.event.load。