Как добавить текстовые поля внизу Highchart?

Question

У меня есть образец верхней диаграммы, и я хочу добавить пять текстовых полей с разными цветами в нижней части диаграммы.

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>


Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Stacked column chart'
    },
    xAxis: {
        categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Total fruit consumption'
        }
    },
    tooltip: {
        pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
        shared: true
    },
    plotOptions: {
        column: {
            stacking: 'percent'
        }
    },
    series: [{
        name: 'Excellent',
        data: [5, 3, 4, 1, 2]
    }, {
        name: 'Poor',
        data: [2, 2, 9, 2, 1]
    }, 
    {
        name: 'Fair',
        data: [5, 3, 1, 7, 2]
    }, {
        name: 'Good',
        data: [2, 2, 3, 6, 1]
    }, {
        name: 'Very good',
        data: [3, 4, 8, 2, 5]
    }    ]
});

Answer 1

Вы можете использовать модуль annotations для добавления текстовых полей:

annotations: [{
    labelOptions: {
        y: 0,
        overflow: 'none',
        shape: 'rect'
    },
    labels: [{
        point: {
            x: 50,
            y: 280
        },
        backgroundColor: 'red',
        text: 'some text'
    }, {
        point: {
            x: 250,
            y: 280
        },
        backgroundColor: 'blue',
        text: 'some text'
    }]
}]

Демонстрационная версия: http://jsfiddle.net/BlackLabel/4h0gp2qz/

API Reference: https://api.highcharts.com/highstock/annotations