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参考： https://api.highcharts.com/highstock/annotations

如何在Highchart的底部添加文本框？

1 个答案: