0

我有一个圆环图，当悬停在图表中的不同部分时，我想在里面输出文本。我快完成了，但我似乎无法让文本正确居中。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 函数内悬停时设置。

4

1 回答 1

0

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

在图形区域之外创建一个 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"');
       }
   }
}
于 2013-05-10T20:34:15.763 回答