Question

我有条形图。我希望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这样的脏兮兮的黑客（只是为了告诉你我想做什么 - 尽管它没有正确对齐）。

我怎么能做到这一点？

Answer 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/

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

1 个答案: