Highcharts在中心的甜甜圈图表文字在悬停时发生变化 [英] Highcharts Donut Chart text in center change on hover

问题描述

我正在寻找一种让悬停中的圆环图中心有文字的方法。当没有悬停状态时，中心将显示总金额（这里我代表休假日，因此可能是15个休假日）。悬停时，中心的文字需要与细分的部分（可用，请求和休假日期）相匹配，但我无法弄清楚如何根据悬停来更改中心内的文字。有没有人有任何想法？任何帮助是极大的赞赏！！

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

推荐答案

使用 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});
                    }
                }
            }

where innerText只是自定义属性，像这样创建：

Where innerText is just custom property, created like this:

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

这篇关于Highcharts在中心的甜甜圈图表文字在悬停时发生变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！