在 Highcharts 条形图中居中数据标签答案

【问题标题】：Centering a data label in Highcharts Bar Chart在 Highcharts 条形图中居中数据标签
【发布时间】：2012-04-25 06:30:40
【问题描述】：

我正在尝试在 Highcharts 的条形图中将标签居中。在我的情况下，您可以在此处看到的倒瀑布图：

http://jsfiddle.net/mUD9a/3/

我正在尝试将每个条形中的数据标签水平居中，这样如果系列中的数据点的低值为 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/

使用最新版本，通过更改格式化程序回调中的选项似乎不会影响渲染。

感谢任何帮助。

【问题讨论】：

标签： javascript highcharts

【解决方案1】：

我知道这是旧的，但我只是需要这个，所以我是这样做的。我选择的解决方案是 How to position datalabel at the base of bar series 和 alba lions 示例的组合，使用 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

【讨论】：

【解决方案2】：

我快速浏览了文档和您的示例，并在您的系列中使用 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

【讨论】：

您的小提琴链接不起作用。你能添加一个更新的链接吗？

【解决方案3】：

试试这个：

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>';
 },

【讨论】：