有没有办法将数据标签移动到HighCharts中堆叠列的一侧？

Question

我有一个堆积的柱形图，其中包含目标编号和实际编号。我使用百分比堆叠，以便它们都具有相同的视觉重量，但显示我们接近目标的距离。我正在尝试将目标的标签放在列的右侧。像这样：

我能想到的唯一方法是使用系列dataLabels

的x值

"series": [{
    "name": "Target",
    "type": "column",
    "color": "rgba(185,74,72, .5)",
    "borderColor": "rgba(185,74,72, 1)",
    "borderWidth": 2,
    "data": targetsAdj,
    "dataLabels": {
         x:55,
         verticalAlign:'top',
         "formatter": function() {
             if (this.series.index == 0) return targets[this.point.x];
             else return this.y;
         }
     }
},{
    "name": "MCBF",
    "type": "column",
    "data": mcbf,
    "color": "rgba(47,126,216,.5)",
    "borderColor": "rgba(47,126,216,1)",
    "borderWidth": 2,
    "zIndex": 10
} ]

问题是，当图表调整大小时，列会改变宽度，然后标签位于错误的位置。

有更好的方法吗？ 此外，任何关于清理百分比处理的建议也将受到赞赏。

http://jsfiddle.net/3MhT4/

Answer 1

这里的问题当然是你的x:55是硬编码的图表的初始大小。我无论如何都看不到它的动态。我如何处理这个问题就是将dataLabels全部放在一起，而是使用text renderer来注释图表。这样您就可以自由地放置/设置标签样式。

这是一个将标签直接放在每个栏右侧的功能：

var posDataLabel = function(chart){
    var cW = chart.series[0].columnMetrics.width;
    var someLabels = [];
    $.each(Highcharts.charts[0].series[0].data, function(i,dP){
        var xPos = dP.plotX + cW/2 + chart.plotLeft + 4; // x position is center column postion + 1/2 the width + the start of the plot area
        someLabels.push(chart.renderer.text(targets[i], xPos, 20));
        someLabels[someLabels.length-1].add();
    });
    // remember the last labels and remove them on redraw
    if (this.lastLabels){
        $.each(this.lastLabels, function(i,j){
            $(j.element).remove();
        });
    }        
    this.lastLabels = someLabels;
}   

从chart.load和chart.redraw事件中调用此函数应该会让您非常接近。这是一个updated fiddle。

Answer 2

您可以使用align: 'right'将dataLabel设置为右侧。然后将修复x偏移，请参阅：http://jsfiddle.net/3MhT4/6/

        dataLabels: {
            x: 40,
            align: 'right',        
            ... 
        }