Highcharts - 如何在悬停时在每个饼图上的图标后面放置工具提示？

Question

我希望得到以下帮助：

在每个饼图片上放置html标签（元素+类以显示图标）并将其放置在悬停工具提示后面？

目前我有这个：

                          var chart = new Highcharts.Chart({
                            chart: {
                                renderTo: 'modules',
                                plotBackgroundColor: null,
                                plotBorderWidth: null,
                                plotShadow: false,
                                type: 'pie',
                                backgroundColor:"transparent"
                            },
                            credits:{
                                enabled:false
                            },
                            exporting: {
                                enabled: false
                            },
                            title: {
                                text: '',
                                style: {
                                    fontSize: '20px',
                                    color: '#999999',
                                    fontWeight: 'bold',
                                    fontFamily: 'Verdana'
                                }
                            },
                            subtitle:{
                                text: '',
                                style: {
                                    fontSize: '15px',
                                    color: '#999999',
                                    fontFamily: 'Verdana'
                                }
                            },
                            tooltip: {
                              borderWidth: 0,
                                borderColor: null,
                                borderRadius: 0,
                                shadow: false,
                                shape: "callout",
                                pointFormat: "{series.data.name}",
                                backgroundColor: "rgba(0,0,0,0.8)",
                                style: { "color": "#ffffff", "cursor": "default", "fontSize": "12px", "pointerEvents": "none", "whiteSpace": "nowrap" }
                            },
                            plotOptions: {
                                pie: {
                                    allowPointSelect: true, // on click pulls segment out
                                    stickyTracking: false, // mouse events
                                    cursor: 'pointer',
                                    followPointer:true,
                                    dataLabels: {
                                        enabled: false, // annotation of each segment
                                        format: '<b>{point.name}</b>',
                                        style: {
                                            color: "#FFFFFF"
                                        }
                                    }
                                },
                                series: {
                                    animation: {
                                        duration: 1000,
                                        easing: 'easeOutBounce'
                                    },
                                    point: {
                                        events: {
                                            mouseOver: function(event) {
                                                var point = this;

                                                if (!point.selected) {
                                                    //chart.tooltip.shared = true;

                                                    timeout = setTimeout(function () {
                                                        point.firePointEvent('click');

                                                        chart.tooltip.shared = false;
                                                        chart.tooltip.refresh(point);
                                                    }, 100);
                                                }
                                            }
                                        }
                                    },
                                    events: {
                                        mouseOut: function() {
                                            chart.tooltip.shared = false;
                                            clearTimeout(timeout);
                                        }
                                    },
                                    dataLabels: {
                                        allowOverlap:false,
                                        enabled: true,
                                        useHTML: true,
                                        format:'{point.icon}',
                                        formatter: function() {
                                            return Math.round(this.percentage*100)/100 + ' %';
                                        },
                                        distance: -70,
                                        color:'#FFFFFF'
                                    }
                                }
                            },
                            series: [{
                                type: 'pie',
                                name: 'Modules',
                                colorByPoint: true,
                                color:'#FFFFFF',
                                data: [
                                    {
                                        name: 'Scheduling',
                                        y: 60,
                                        icon: '<i class="fa fa-book" style="font-size:80px;margin:-20px;"></i>'
                                    },
                                    {
                                        name: 'Budgeting',
                                        y: 60,
                                        icon: '<i class="fa fa-calculator" style="font-size:70px;margin:-24px -20px -20px -40px;"></i>'
                                    },
                                    {
                                        name: 'Attendance',
                                        y: 60,
                                        icon: '<i class="fa fa-user" style="font-size:80px;margin:-40px -15px -40px -15px;"></i>'
                                    },
                                    {
                                        name: 'Reporting',
                                        y: 60,
                                        icon: '<i class="fa fa-bar-chart" style="font-size:80px;margin:-40px -20px -40px -15px;"></i>'
                                    },
                                    {
                                        name: 'Absence',
                                        y: 60,
                                        icon: '<i class="fa fa-bed" style="font-size:80px;margin:-30px -20px -30px 0px;"></i>'
                                    },
                                    {
                                        name: 'Payroll',
                                        y: 60,
                                        icon: '<i class="fa fa-gbp" style="font-size:80px;margin:-10px -20px -20px 10px;"></i>'
                                    }
                                ]
                            }]
                        });

如果您将每个切片悬停，则工具提示位于font-awesome图标后面？

可以落后吗？

Answer 1

您需要使用html工具提示而不是svg工具提示。将tooltip.useHTML设置为true。

禁用工具提示的svg框

var newarr = [1,2]

在css中设置样式：

tooltip: {
  borderWidth: 0,
  borderColor: null,
  borderRadius: 0,
  shadow: false,
  backgroundColor: "none",
  useHTML: true,

实例和输出

https://jsfiddle.net/tz5stfcw/