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 に答える