Highcharts条形图数据标签位置

Highcharts bar data labels position

本文关键字：位置 标签 数据 条形图 Highcharts      更新时间：2023-09-26

我正在尝试将下面小提琴的数据标签对齐在每个条的中间（没有成功）。顶部和底部的数据标签似乎让这件事看起来很糟糕。最高的酒吧标签也与酒吧本身重叠。

我看了一遍文件，但没能把这件事做好。

这是小提琴：http://jsfiddle.net/9qLkx1f1/

以下是数据标签设置：

 plotOptions: {
        bar: {
            dataLabels: {
                enabled: true,
                useHTML: true,
                formatter: function() {
                    return this.series.name + "<span style='color:#0D2A4D; opacity:0.5;'> (" + this.y + "%) </span>";
                }
            }
        },
        series: {
             groupPadding: 0,
             minPointLength: 20,
             pointPadding: 0.2, 
             pointWidth: 10
        }
    },

在plotOptions内设置填充：0。

 plotOptions: {
        bar: {
            dataLabels: {
                   padding :0, 
             }
        }
 }

并设置yaxis tickinterval

  yAxis: {
        tickInterval : 80,
  }

Fiddle：http://jsfiddle.net/9qLkx1f1/14/

在下面的代码中简单地增加高度。希望我已经理解你了。如果我错了，请纠正我的

FIDDLE演示

 $('#container').highcharts({
        chart: {
            type: "bar",
            height: 150, <---- This is the change
            events: {
                redraw: function () {
                    //$(window).trigger('resize');
                },
                load: function () {
                    //$(window).trigger('resize');
                }
            }
        },

希望这就是您想要的

相关文章：