Question

我有一个圆环图，当我将鼠标悬停在图表中的不同部分时，我想在其中输出文字。我差不多完成了，但我似乎无法让文本正确居中。 JSFiddle：http://jsfiddle.net/K5dhu/

代码：

$(function() {      
var colors = ['#8d62a0', '#ceb3d8', '#d5dddd'];
var chart = new Highcharts.Chart({
chart: {
    renderTo: 'DivGraphCategories',
    type: 'pie',
    height: 250,
    width: 250,
    borderRadius: 0
},
credits: {
    enabled: false
},
title: false,

plotOptions: {
    pie: {
        borderWidth: 0,
        startAngle: 90,
        innerSize: '70%',
        size: '100%',
        shadow: false,
        // {
        //     color: '#000000',
        //     offsetX: 0,
        //     offsetY: 2,
        //     opacity: 0.7,
        //     width: 3
        // },
        dataLabels: false,
        stickyTracking: false,
        states: {
            hover: {
                enabled: false
            }
        },
        point: {
        events: {
            mouseOver: function(){
                this.series.chart.innerText.attr({text: this.y});
            }, 
            mouseOut: function(){
                this.series.chart.innerText.attr({text: "Mouseout value"});
            }
        }
        }
    }
},

series: [{
    data: [
        {y: 6926, name: 'hopp1'},
        {y: 1370, name: 'hopp2'},
        {y: 1250, name: 'hopp3'},
        {y: 10000, name: 'hopp4'},
        {y: 1062, name: 'hopp5'},
        {y: 6376, name: 'hopp6'},
        {y: 2514, name: 'hopp7'},
        {y: 349, name: 'hopp8'}
    ]
    // 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.innerText = chart.renderer.text('Start value', 112, 125).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();
});
});

如您所见，文本左对齐并在开始时位于112,125。有没有办法根据文本的长度每次设置位置？或者将此文本设置为中心的任何属性，无论其中是什么..文本在mouseOver函数中悬停设置。

Answer 1

嗯，这可能不是这个问题答案的完美定义。但它是以另一种方式解决问题的一种方式，它提供了更多的可定制性。

在图表区域外创建div或其他内容，并将css正好放在圆环图表出现位置的中心位置。

示例：

<div class="graph_center">
     <h5 id="GraphCenterName"></h5>
     <h3 id="GraphCenterValue"></h3
</div>

然后你就可以使用像这样的mouseover和mouseout事件：

point: {
    events: {
        mouseOver: function(){
           $('#GraphCenterName').text(this.name);
           $('#GraphCenterValue').text(this.y);
        },
        mouseOut: function(){
           $('#GraphCenterName').text('Whatever default text you want');
           $('#GraphCenterValue').text('Whatever default value you want"');
       }
   }
}

Highcharts甜甜圈 - 中心文本

1 个答案: