有没有办法将自定义工具提示添加到 highcharts 上钻取的第二级列?

我想向钻取的第二级中的列添加其他信息。例如,对于“类别 1”中的“材料 1”,我想显示 4 个项目(文本)的列表,然后在“类别 1”中的“材料 2”中,我想显示 6 个项目(文本)的列表。


我刚刚找到了向工具提示添加通用信息的方法,但没有为每一列添加特定信息。


http://jsfiddle.net/7qv6x3pj/


$(function () {

    $('#container').highcharts({

                chart: {

                    type: 'column'

                },

                title: {

                    text: "Title 1"

                },

                xAxis: {

                    type: 'category'

                },

                yAxis: {

                    title: {

                        text: 'Stuff'

                    }

                },

                colors: [

                    '#1b6601',

                    '#2dae01',

                    '#BBDDA5',

                    '#FF0',

                    '#f20808'

                ],

                series: [{

                    name: "Title",

                    colorByPoint: true,

                    data: [

                        {

                            name: "Category 1",

                            y: 3,

                            drilldown: "cat1"

                        },

                        {

                            name: "Category 2",

                            y: 4,

                            drilldown: "cat2"

                        },

                        {

                            name: "Category 3",

                            y: 7,

                            drilldown: "cat3"

                        }

                    ]

                }],

慕容708150
浏览 128回答 1
1回答

一只名叫tom的猫

您可以使用tooltip.formatter保存在点对象中的附加属性来实现它。检查下面发布的演示和代码。代码:tooltip: {&nbsp; formatter: function() {&nbsp; &nbsp; if (this.point.tooltipInfo) {&nbsp; &nbsp; &nbsp; return 'Something: <br>- ' + this.point.tooltipInfo.join('<br>- ');&nbsp; &nbsp; }&nbsp; &nbsp; return this.y;&nbsp; }},drilldown: {&nbsp; series: [{&nbsp; &nbsp; name: "Category 1",&nbsp; &nbsp; id: "cat1",&nbsp; &nbsp; data: [{&nbsp; &nbsp; &nbsp; &nbsp; name: "stuff 1",&nbsp; &nbsp; &nbsp; &nbsp; y: 4,&nbsp; &nbsp; &nbsp; &nbsp; tooltipInfo: ['aaa', 'bbb', 'ccc', 'ddd']&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; name: "stuff 2",&nbsp; &nbsp; &nbsp; &nbsp; y: 6,&nbsp; &nbsp; &nbsp; &nbsp; tooltipInfo: ['aaa', 'bbb', 'ccc', 'ddd', 'eee', 'fff']&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; [&nbsp; &nbsp; &nbsp; &nbsp; "stuff 3",&nbsp; &nbsp; &nbsp; &nbsp; 5&nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; &nbsp; [&nbsp; &nbsp; &nbsp; &nbsp; "stuff 4",&nbsp; &nbsp; &nbsp; &nbsp; 6&nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; ]&nbsp; }]}演示:http://jsfiddle.net/BlackLabel/vjoprc7t/API参考:https://api.highcharts.com/highcharts/tooltip.formatter
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript