Highcharts在中心更改悬停中的甜甜圈图表文字
问题描述:
我正在寻找一种让悬停时更改中心图标的方式。当没有悬停状态时,中心将显示总金额(这里我代表休假日,因此可能是15个休假日)。悬停时,中心的文字需要与细分的部分(可用,请求和休假日期)相匹配,但我无法弄清楚如何根据悬停来更改中心内的文字。有没有人有任何想法?任何帮助是极大的赞赏!!Highcharts在中心更改悬停中的甜甜圈图表文字
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});
}
}
}
其中的innerText只是自定义属性,这样创建:
chart.innerText = chart.renderer.text('112', 112, 125).css({ ... }).add();
非常感谢!这就像一个魅力。我非常感谢你的帮助! – sarahholden 2013-03-28 17:39:47
在jsfiddle中你提到var circleradius = 102;你是如何得到这个circleradius的?有什么方法可以动态获取? – Vivek 2015-01-20 07:52:08
最好向问题作者提问。这不是我的代码的一部分。我会这样计算内心的位置:http://jsfiddle.net/NVX3S/904/(只是玩标签的边界框和派的中心位置)。 – 2015-01-20 10:47:26