时间戳

首页 > 解决方案 > 如何在xaxis上添加多个文本

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

问题描述

我正在努力在 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/

标签： javascriptjqueryhighchartssankey-diagram

解决方案

要将文本添加到图表中，您可以使用annotations模块或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

推荐阅读