javascript - 一列中的Highcharts值

Question

我想将条形图右侧显示的值（34.4、21.8、20.1 等）与图表的远端对齐，如下图所示：

原来的：

所需的价值观右对齐：

我正在使用 HighCharts，我的代码是：

$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'column',
                margin: [ 50, 50, 100, 80],
                inverted: true
            },
            title: {
                text: 'World\'s largest cities per 2008'
            },
            xAxis: {
                categories: [
                    'Tokyo',
                    'Jakarta',
                    'New York',
                    'Seoul',
                    'Manila',
                    'Mumbai',
                    'Sao Paulo',
                    'Mexico City',
                    'Dehli',
                    'Osaka',
                    'Cairo',
                    'Kolkata',
                    'Los Angeles',
                    'Shanghai',
                    'Moscow',
                    'Beijing',
                    'Buenos Aires',
                    'Guangzhou',
                    'Shenzhen',
                    'Istanbul'
                ],
                labels: {
                    rotation: 0,
                    align: 'right',
                    style: {
                        fontSize: '13px',
                        fontFamily: 'Verdana, sans-serif'
                    }
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Population (millions)'
                }
            },
            legend: {
                enabled: false
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.x +'</b><br/>'+
                        'Population in 2008: '+ Highcharts.numberFormat(this.y, 1) +
                        ' millions';
                }
            },
                series: [{
                name: 'Population',
                data: [34.4, 21.8, 20.1, 20, 19.6, 19.5, 19.1, 18.4, 18,
                    17.3, 16.8, 15, 14.7, 14.5, 13.3, 12.8, 12.4, 11.8,
                    11.7, 11.2],
                dataLabels: {
                    enabled: true,
                    rotation: 0,
                    color: 'Black',
                    align: 'right',
                    //x: parseFloat(this.y) + 10,
                    x: 40,
                    y: 10,
                    formatter: function() {
                        return this.y;
                    },
                    style: {
                        fontSize: '13px',
                        fontFamily: 'Verdana, sans-serif'
                    }
                }
            }]
        });
    });
});

我在这里有一个 jsFiddle

Answer 1

我认为使用它的 API 还不可能做到这一点。
但是下面的代码可以为你做到这一点：

//#container是您的图表容器 ID

$('#container .highcharts-data-labels g').attr('transform', function(i, value) {
    return value.replace(/\d+/, chart.containerWidth - 150);
});

如果您检查图表内容，您会看到每个标签都有transformattr，这是用于将标签放入图表中的，因此上面的代码替换了x它的 attr 的第一个参数（）。

演示

Answer 2

我必须为我的一个项目这样做。这是小提琴。http://jsfiddle.net/kashyap02004/veJ38/。

基本上你必须像这样渲染值：

$('#container').highcharts({
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Historic World Population by Region'
    },
    subtitle: {
        text: 'Source: Wikipedia.org'
    },
    xAxis: {
        categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
        title: {
            text: null
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Population (millions)',
            align: 'high'
        },
        labels: {
            overflow: 'justify'
        }
    },
    tooltip: {
        valueSuffix: ' millions'
    },
    plotOptions: {
        bar: {
            dataLabels: {
                enabled: false
            }
        }
    },
    credits: {
        enabled: false
    },
    series: [{
        name: 'Year 1800',
        data: [107, 31, 645, 203, 20]
    }]
},

// 这就是所有魔法发生的地方

function (chart) {
    for (var i = 0; i < chart.series[0].data.length; i++) {
        var point = chart.series[0].data[i];

        var text = chart.renderer.text(
        point.y, // you can display any property on that object.
        //tweek these values to align it
        chart.plotLeft + chart.plotSizeY - 30,
        chart.plotHeight - point.barX + 45).attr({
            zIndex: 5,
            fill: '#666679',
        }).add();
    }
});