Highcharts Namen einer Reihe auf der X-Achse

Habe ich dieses Säulendiagramm http://jsfiddle.net/TU7TL/ ich Frage mich, ob es einen Weg gibt, um die Namen der Reihe zu erscheinen, die unter Ihrem jeweiligen Spalte, zum Beispiel "Tokyo" würde direkt unter der blauen Leiste, anstatt nur in der Legende. Code unten

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Monthly Average Rainfall'
        },
        subtitle: {
            text: 'Source: WorldClimate.com'
        },
        xAxis: {
            categories: [
                'Tokyo',
                'New York',
                'London'
            ]
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Rainfall (mm)'
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: 'Tokyo',
            data: [49.9]

        }, {
            name: 'New York',
            data: [83.6],


        }, {
            name: 'London',
            data: [48.9]

        }, {
            name: 'Berlin',
            data: [42.4]

        }]
    });
});

jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/...

InformationsquelleAutor 6elephants | 2013-08-26

Komplett die Kategorien als:

categories: [
                    'Tokyo',
                    'New York',
                    'London',
                    'Berlin'
                ]

dann die stacking-option:

plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0,
                    stacking: 'normal'
                }
            }

Dann Ihre Daten in Serie:

series: [{
                name: 'Tokyo',
                data: [49.9,null,null,null]

            }, {
                name: 'New York',
                data: [null,83.6,null,null],


            }, {
                name: 'London',
                data: [null,null,48.9,null]

            }, {
                name: 'Berlin',
                data: [null,null,null,42.4]

            }]

Hier haben Sie die Fiedel:

http://jsfiddle.net/TU7TL/1/

Alternativ kann man es mit nur einer serie, und setzen alle Ihre Daten in der serie array so:

series: [{
            name: 'Measure',
            data: [{y:49.9, color: colors[0]},{y:83.6, color: colors[1]},{y:48.9, color: colors[2]},{y:42.4,color: colors[3]}]

        }]
    });

Mit dieser letzten Methode müssen Sie die verschiedenen Farben in der gleichen serie. bisher habe ich Sie deklarieren und verwenden eine variable "Farben", um die Farben, die aus Highchart:

var colors = Highcharts.getOptions().colors;