javascript - 悬停对圆环图的 Inside/InnerSize 有何影响？

Question

我已经实现了悬停效果，但仅在图表的边框上。我在这里想要实现的目标是让悬停效果也适用于图表内部。

JS fiddle :http://jsfiddle.net/amigoo/zwod86e1/

这是我的代码:

$(function() {
    Highcharts.setOptions({
        colors: ['#8edce7', '#e8ebeb']
    });

    // Create the chart for completion
    var chart_completion = new Highcharts.Chart({
        chart: {
            renderTo: 'container1',
            type: 'pie',
            margin: [0,0,0,0],
            height: 100,
            width: 100

        },
        tooltip: {
            enabled: false,
        },
        plotOptions: {
            pie: {
                slicedOffset: 0,
                size: '100%',
                dataLabels: {
                    enabled: false
                }
            },
            series: noBorder
        }, 
        title: {
            text: 'In Prog.',
            align: 'center',
            verticalAlign: 'middle',
            style: {
                fontSize: '9.5px'
            }

        },      
        credits: {
           enabled: false
        },
        series: [{
            name: 'Browsers',
            data: [["MSIE",10],[,2]],
            innerSize: '80%',
            showInLegend:false,
            dataLabels: {
                enabled: false
            },
            states:{
                hover: {
                    enabled: false
                }
            },
            point : {
                events: {
                    mouseOver: function(){
                       this.oldTitle = chart_completion.options.title.text;

                       chart_completion.setTitle({
                            text: 'New title '
                        });

                    },
                    mouseOut: function(){
                        chart_completion.setTitle({
                            text: this.oldTitle
                        });
                    }
                }
            }
        }]
    });

Answer 1

在你的plotOption.series中使用它

   series: {
               stickyTracking: true,
            events: {
                    mouseOver: function(){
                       alert("mouseOver");


                    },
                    mouseOut: function(){
                         alert("mouseOut");
                    }
            }
        }