javascript - 如何在x轴上添加多个文本

Question

我正在努力在 x 轴上添加多个文本。大多数事情(例如在 x 轴上给出名称字段)不适用于桑基图。

问题:我需要在桑基图上的 x 轴下方添加 2 个文本。第一个文本位于蓝色条的正下方和中心。我需要的第二个文本位于灰色条下方，但它应该与第一个文本位于同一行

这是我的代码

Highcharts.chart('container', {

    title: {
        text: ''
    },
        xAxis: {
        type: 'football league'
    },

    series: [{
        keys: ['from', 'to', 'weight'],
        data: [
            ['Football', 'Messi', 20 ],
            ['Football', 'ronaldo', 3 ],
            //['Challenged', 'Terminated', 0 ],
            ['Football', 'sachin', 1 ],
            ['Messi', 'sehqag', 12 ],
            //['Instituted', ' Terminated', 0 ],
            ['Messi', 'ashwin', 6 ],
            ['Messi', ' ramesg', 2 ],

        ],
        type: 'sankey',
        name: 'Sankey demo series'
    }]

});

JSFiddle:https://jsfiddle.net/anikettiwari/kLzv8sp0/26/

Answer 1

要向图表添加文本，您可以使用注释模块或Highcharts.SVGRenderer:

annotations: [{
    labels: [{
        text: 'annotations',
        point: {
            x: 100,
            y: 380
        }
    }, {
        text: 'annotations2',
        point: {
            x: 400,
            y: 380
        }
    }]
}]

现场演示:https://jsfiddle.net/BlackLabel/odc4jsku/

API:https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text

文档:https://www.highcharts.com/docs/advanced-chart-features/annotations-module