5

我正在寻找一种在悬停时更改圆环图中心的文本的方法。没有悬停状态时，中心会显示总金额（这里我代表放假天数，所以可能是15个放假天数）。悬停时，中心的文本需要与悬停的段匹配（可用、请求和休假日），但我不知道如何根据悬停更改中心的文本。有没有人有任何想法？任何帮助是极大的赞赏！！

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();
    });
});
4

1 回答 1

6

使用points.events.mouseOver/mouseOut，例如：http: //jsfiddle.net/NVX3S/147/

代码：

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

其中 innerText 只是自定义属性，创建如下：

chart.innerText = chart.renderer.text('112', 112, 125).css({ ... }).add();
于 2013-03-28T16:48:22.050 回答