在Highcharts条形图中居中放置一个数据标签

问题描述：

我试图在Highcharts的条形图中居中放置一个标签。在一个倒置的瀑布图中我的情况下，你可以在这里看到：在Highcharts条形图中居中放置一个数据标签

我想水平居中各酒吧内的数据标签，这样如果在该系列中的数据点具有低，1和y 3，点就坐在2.我想在这里高图表文档建议的解决方法：

http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-datalabels-y/

随着最新版本，它似乎并没有影响到渲染更改格式化程序回调中的选项。

任何帮助表示赞赏。

答

我快速浏览了文档和您的示例，并在您的系列文章中使用dataLabel提出了强力解决方案。显然与中心对齐将以y为中心（例如上面的3）。所以，我只是使用数据标签上的x偏移来移动它。不是一个真正的妥善解决，但可以让你在正确的方向思考：

series: [{ 
    min: 0, 
    max: versions.length + 1, 
    data: [ { low: 1, y: 3 }, { low: 2, y: 4 }, { low: 3, y: 5 }, { low: 3, y: 5 } ], 
    dataLabels: { 
     enabled: true, 
     color: '#FFFFFF', 
     align: 'right', 
     x: -130, 
     y: 10, 
     formatter: function() { 
      return versions[this.y - 1]; 
     }, 
     style: { 
      fontSize: '13px', 
      fontFamily: 'Verdana, sans-serif' 
     } 
    }          
}]

Wayback Machine Archived Version - Not functional, but the code is there

你拨弄链接不起作用。你能添加更新的链接吗？ – Eric 2015-10-14 18:46:26

答

我知道这是老了，但我只是需要这个，所以这里是我做到了。我解决的解决方案是How to position datalabel at the base of bar series和alba狮子示例的组合，使用stackLabels而不是dataLabels。

yAxis:{ 
    stackLabels: { 
     style: { 
      color: 'white'  // Make the labels white 
     }, 
     enabled: true,   // Enable stack labels 
     verticalAlign: 'middle', // Position them vertically in the middle 
     align: 'center',   // Align them to the left edge of the bar 
     formatter: function() { 
      return categories[this.x]; 
     } 
    } 
}

见jsfiddle

答

试试这个：

plotOptions: { 
     series: { 
     dataLabels: {      
      enabled: true, 
      color: '#000000', 
      useHTML:true, 
      style: { 
        fontSize: '13px', 
        fontFamily: 'Verdana, sans-serif' 
        }, 
      formatter:function(){ 
       return '<div align="center"><b><span>' + this.point.options.name + '</b><br />'+this.x+' '+this.y+'</span></div>'; 
},

在Highcharts条形图中居中放置一个数据标签

相关推荐