如何将数据标签移动到绘图区域的边界？答案

【问题标题】：Howto move dataLabels to the border of the plot area?如何将数据标签移动到绘图区域的边界？
【发布时间】：2014-07-11 18:02:58
【问题描述】：

我有一个条形图。我希望 dataLabels 不粘在条上，而是将其移动到绘图区域的最右边框并使其与文本右对齐。

这就是我到目前为止所得到的：(jsfiddle)

$(function () {
    var cat = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']; //, 'Sep', 'Oct', 'Nov', 'Dec', 'foo', 'bar', 'bla'];
    var barWidth = 16;

    chart = new Highcharts.Chart({
        chart: {
            type: "bar",
            renderTo: 'container',
            events: {
                load: function() {
                    var plotHeight = this.plotHeight;
                    console.log('plotHeight = ' + plotHeight);
                    var catWidth = (barWidth-2) / (2*plotHeight/cat.length);
                    var plot = [];
                    for(var i=0; i<(cat.length); i+=1) {
                        var newPlot = {
                            color: 'grey',
                            width: 1,
                            value: i+catWidth //+(cat.length/($('#container').height()/10))
                        };
                        plot.push(newPlot);
                        this.xAxis[0].addPlotLine(newPlot);
                    }
                    //this.xAxis[0].addPlotLine(plot);
                }
            }
        },
        title: {
            text: null
        },
        credits: {
            text: null,
            enabled: false
        },
        xAxis: {
            categories: cat,
            title: {
                text: null,
                enabled: false
            }
        },
        yAxis: {
            title: {
                text: null,
                enabled: false
            },
            labels: {
                enabled: false
            },
            gridLineWidth: 0,
            gridLineColor: 'none'
        },
        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true,
                    color: '#000',
                    formatter: function() {
                        return Math.abs(this.y).toFixed(1) + '%';
                    },
                    crop: false,          // DIRTY!!!  :(
                    overflow: 'justify',  // DIRTY!!!  :(
                    x: -360               // DIRTY!!!  :(
                }
            }
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5], //, 216.4, 194.1, 95.6, 54.4, 9.9, 9.9, 9.9],
            pointWidth: barWidth
        }]
    });
});

我必须坚持使用大部分本地 Highcharts，因为我需要将图表导出为 svg 以便在 pdf 文件中重复使用。因此，使用 CSS 和 useHtml: true 以及像 crop: false, overflow: 'justify', dataLabels.x: -360 这样的肮脏 hack 是没有问题的（只是为了向您展示我想要做什么 - 尽管它没有正确对齐）。

我怎样才能做到这一点？

【问题讨论】：

标签： javascript highcharts alignment

【解决方案1】：

您可以在此处使用翻译数据表的解决方法：

var width = chart.plotWidth;

$.each(chart.series[0].data, function(i,d){

                    var bbox = d.dataLabel.getBBox().width;

                    d.dataLabel.attr({
                        x:  width - bbox
                    });
                });

http://jsfiddle.net/9YyVJ/2/

【讨论】：

哇，谢谢。几乎完美。但是在“重绘”（例如，通过单击图例禁用和重新启用系列）时，尽管我将您的代码重新应用于redraw 事件，但位置仍会重新堆叠到条形图上。 updated jsfiddle
因为你更早定位标签然后动画完成。如果你禁用它，你会发现一切正常jsfiddle.net/9YyVJ/4
但是我喜欢这部动画，不想错过。是否有“动画完成”的事件？我的意思是数据标签的defer 参数似乎使用了这样的事件。
所以你需要在动画后翻译标签。
我删除了series.animation: false，所以我仍然会有初始动画。重绘没有动画，但我现在可以忍受。我仍然会对如何实现这一点感兴趣。为animation.complete 定义回调函数不起作用。