Highcharts条形数据标签位置

时间:2014-09-12 09:35:44

标签: javascript jquery html css highcharts

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

我查看了文档,但无法使这件事看起来很好。

Here is the fiddle: 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
        }
    },

2 个答案:

答案 0 :(得分:1)

在plotOptions中设置填充:0

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

并设置yaxis tickinterval

  yAxis: {
        tickInterval : 80,
  }

小提琴:http://jsfiddle.net/9qLkx1f1/14/

答案 1 :(得分:0)

只需在以下代码中增加高度即可。希望我了解你。如果我错了请纠正我

<强> FIDDLE DEMO

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

希望这就是你要找的东西