javascript - HighCharts:如何将 xAxis 类别文本放入图表中

Question

我正在使用 Highcharts，但我无法完成某些事情。这是我想要的:

如您所见，每个栏的文本都在栏的顶部。

这是我一直在研究的版本:

$(function () {
        $('#container').highcharts({
            chart: {
                type: 'bar'
            },
            title: {
                text: 'APPROVED SPEND TO DATE FOR FISCAL YEAR 2013: $17,360,612'
            },
            xAxis: {
                categories: ['Intellectual Property', 'Antitrust/Competition'],
                title: {
                    text: null
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Approved spend',
                    align: 'high'
                },
                labels: {
                    overflow: 'justify'
                }
            },
            tooltip: {
                valueSuffix: ' dollars'
            },
            plotOptions: {
                bar: {
                    dataLabels: {
                        enabled: false
                    }
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -40,
                y: 100,
                floating: true,
                borderWidth: 1,
                backgroundColor: '#FFFFFF',
                shadow: true
            },
            credits: {
                enabled: false
            },
            series: [{
                name: 'Year 2013',
                data: [6000123, 3743653]
            }]
        });
    });

JSFiddle:http://jsfiddle.net/WcKvz/1/

如您所见，我只有栏左侧的文本，但我无法正确显示。

有什么想法吗？谢谢

Answer 1

我看到这项工作的唯一方法是使用 stackedLabels。即使您没有使用堆叠条，也可以使用它们，因为您只有一个系列。

        ...
        plotOptions: {
            bar: {
                stacking: 'normal'
            }
        },
        yAxis: {
            stackLabels: {
                formatter: function() {
                    return this.axis.chart.xAxis[0].categories[this.x] + ': $' + this.total;
                },
                enabled: true,           
                verticalAlign: 'top',     
                align: 'left',
                y: -5
            }, 
         ...

http://jsfiddle.net/NVypa/