Highcharts Donut Chart text in center change on hover

问题

I'm looking for a way to have text in the center of a donut chart change on hover. When there is no hover state, the center will display the total amount (here I am representing vacation days, so it may be 15 vacation days). When hovering, the text in the center needs to match the segment hovered over (available, requested, and taken vacation days), but I cannot figure out how to change the text in the center based on hover. Does anyone have any ideas? Any help is greatly appreciated!!

http://jsfiddle.net/NVX3S/146/

<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container1" style="min-width: 300px; height: 300px; margin: 0 auto"></div>


$(function () {
    var colors = ['#8d62a0', '#ceb3d8', '#d5dddd'];
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container1',
            type: 'pie',
            height: 250,
            width: 250,
            borderRadius: 0
        },
        credits: {
            enabled: false
        },
        title: false,
        tooltip: false,
        plotOptions: {
            pie: {
                borderWidth: 6,
                startAngle: 90,
                innerSize: '55%',
                size: '100%',
                shadow: true,
                // {
                //     color: '#000000',
                //     offsetX: 0,
                //     offsetY: 2,
                //     opacity: 0.7,
                //     width: 3
                // },
                dataLabels: false,
                stickyTracking: false,
                states: {
                    hover: {
                        enabled: true
                    }
                }
            }
        },

        series: [{
            data: [
                {y:65, color: colors[0]},
                {y:15, color: colors[1]},
                {y:20, color: colors[2]}
            ]
            // data: [
            //     ['Firefox',   44.2],
            //     ['IE7',       26.6],
            //     ['IE6',       20],
            //     ['Chrome',    3.1],
            //     ['Other',    5.4]
            // ]
        }]
    },
    function(chart) { // on complete

        var xpos = '50%';
        var ypos = '53%';
        var circleradius = 102;


    // Render the text 
    chart.renderer.text('126.5', 103, 127).css({
            width: circleradius*2,
            color: '#4572A7',
            fontSize: '16px',
            textAlign: 'center'
      }).attr({
            // why doesn't zIndex get the text in front of the chart?
            zIndex: 999
        }).add();
    });
});

回答1:

Use points.events.mouseOver/mouseOut, for example: http://jsfiddle.net/NVX3S/147/

Code:

            point: {
                events: {
                    mouseOver: function(){
                        this.series.chart.innerText.attr({text: this.y});
                    }, 
                    mouseOut: function(){
                        this.series.chart.innerText.attr({text: 112});
                    }
                }
            }

Where innerText is just custom property, created like this:

chart.innerText = chart.renderer.text('112', 112, 125).css({ ... }).add();

来源：https://stackoverflow.com/questions/15670427/highcharts-donut-chart-text-in-center-change-on-hover

标签

Highcharts