我正在尝试为点击我创建的圆环图的特定切片时显示的值添加计数器动画，计数器将计算附加到该特定切片的数据值，但动画是如中间数据所示，对于较大的数字来说非常慢。
我想知道如何加快动画速度，另外我如何能够将值显示为带小数的双精度数，现在当你悬停图表的切片时，工具提示会显示正确的值，例如1399,99，但图表中心的计数器将计为1400。
$(function() {
// Create the chart
addLabel = function(point) {
$('.cLabel').remove();
var i = 0,
text = '<span style="color: #323232; font-size: 14px;">' + point.name + '</span><br/>' + '<span style="font-size: 16px; color: #323232;">kr ' + point.subtotal + ' / måned</span><br/>' + '<span style="font-size: 14px; color: #323232;">' + point.y + '</span><br/>',
chart = point.series.chart,
renderer = chart.renderer;
chart.renderer.label(text, chart.chartWidth / 2.02, chart.chartHeight / 2.14).attr({
'text-anchor': 'middle',
}).addClass('cLabel').add();
var intervalsubtotal = setInterval(function() {
if (i < point.subtotal) {
i++;
$('.cLabel')[0].lastChild.lastChild.previousSibling.innerHTML = 'kr ' + i + ' / måned';
} else {
clearInterval(interval);
}
}, 10 / point.subtotal)
var j = 0;
var intervalusers = setInterval(function() {
if (j < point.y) {
j++;
$('.cLabel')[0].lastChild.lastChild.innerHTML = 'Antal brugere: ' + j;
} else {
clearInterval(interval);
}
}, 500 / point.y
)};
答案 0 :(得分：1)
请查看下面的评论，它可能会对您有所帮助
动画太慢了
在图表中使用持续时间选项 - 如下所示的动画
chart:{
animation: { duration: 10 }
}
不显示带小数的值（双精度）
j替换为point.y，因为j是一个整数值。 每当您点击另一个值时，如果计数器已经计数，则计数器开始出现故障（可能会以增加的动画速度修复）
请查看下面的代码段。
$(function() {
// Create the chart
addLabel = function(point) {
var interval = 0;
var i = 0;
$('.cLabel').remove();
text = '<span style="color: #323232; font-size: 14px;">' + point.name + '</span><br/>'+ '<span style="font-size: 16px; color: #323232;">kr ' + point.subtotal + ' / måned</span><br/>' + '<span style="font-size: 14px; color: #323232;">' + point.y + '</span><br/>' ,
chart = point.series.chart,
renderer = chart.renderer;
chart.renderer.label(text, chart.chartWidth / 2.02, chart.chartHeight / 2.14).attr({
'text-anchor': 'middle',
}).addClass('cLabel').add();
var intervalsubtotal = setInterval(function() {
if (i < point.subtotal) {
i++;
$('.cLabel')[0].lastChild.lastChild.previousSibling.innerHTML = 'kr ' + i + ' / måned';
} else {
clearInterval(interval);
}
}, 10 / point.subtotal)
var j = 0;
var intervalusers = setInterval(function() {
if (j < point.y) {
$('.cLabel')[0].lastChild.lastChild.innerHTML = 'Antal brugere: ' + j.toFixed(1);
j= j+0.1;
} else {
clearInterval(interval);
}
}, 500 / point.y
)};
chart = new Highcharts.Chart({
chart: {
animation: {
duration: 10
},
renderTo: 'container',
type: 'pie',
events: {
redraw: function() {
var chart = this;
$('.cLabel').attr({
transform: 'translate(' + chart.chartWidth / 2 + ',' + chart.chartHeight / 2 + ')'
})
}
}
},
title: {
text: 'User diversity and their subtotals'
},
yAxis: {
title: {
text: 'User diversity and their subtotals'
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
shadow: false,
borderColor: "#000000",
borderWidth: 0.6
},
series: {
point: {
events: {
click: function() {
addLabel(this);
}
}
}
}
},
tooltip: {
formatter: function() {
return '<b>' + this.point.name + '</b>: ' + this.y + '<br>' + '<b>' + 'Subtotal: ' + '</b>' + this.point.subtotal + ' kr';
}
},
series: [{
data: [{
name: 'Administrative Brugere',
y: 4,
subtotal: 7899.99,
color: "#B83D5A"
}, {
name: 'Begrænsede Brugere',
y: 8,
subtotal: 5799.99,
color: "#9B344C"
}, {
name: 'Resource Bruger',
y: 14,
subtotal: 2399.99,
color: "#7A293C"
}, {
name: 'Ressource',
y: 18.1,
subtotal: 1299.89,
color: "#5C1F2D"
}],
size: '80%',
innerSize: '82%',
showInLegend: false,
dataLabels: {
enabled: false
}
}]
});
});@import "bourbon";
@import url(//fonts.googleapis.com/css?family=Oswald:400);
body {
font-family: "Oswald", sans-serif;
color: #545454;
}
.cLabel {
font-family: "Oswald", sans-serif;
font-color: #545454;
line-height: 15px;
}
#container {
background: linear-gradient(#ffffff, #e0dfdf);
}
.stats {
width: 160px;
height: 90px!important;
display: inline-block;
z-index: 10;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto;"></div>
<span id="displayStats" class="stats"></span>
答案 1 :(得分：1)
这是我的解决方案，也是find this on jsfiddle。选项globalDurationMilliseconds和globalEasing是强制性的，请在此处详细了解：http://api.jquery.com/animate/
$(function() {
var globalDurationMilliseconds = 500,
globalEasing = 'linear';
// Create the chart
addLabel = function(point) {
$('.cLabel').remove();
var i = 0,
text = '<span style="color: #323232; font-size: 14px;">' + point.name + '</span><br/>' + '<span style="font-size: 16px; color: #323232;">kr ' + point.subtotal + ' / måned</span><br/>' + '<span style="font-size: 14px; color: #323232;">' + point.y + '</span><br/>',
chart = point.series.chart,
renderer = chart.renderer;
chart.renderer.label(text, chart.chartWidth / 2.02, chart.chartHeight / 2.14).attr({
'text-anchor': 'middle',
}).addClass('cLabel').add();
$({
numberValue: 0
}).animate({
numberValue: point.subtotal
}, {
duration: globalDurationMilliseconds,
easing: globalEasing,
progress: function() {
$($('.cLabel')[0].lastChild.lastChild.previousSibling).text((Math.ceil(this.numberValue * 1000) / 1000) + ' / måned');
}
});
$({
numberValue: 0
}).animate({
numberValue: point.y
}, {
duration: globalDurationMilliseconds,
easing: globalEasing,
progress: function() {
$($('.cLabel')[0].lastChild.lastChild).text('Antal brugere: ' + Math.ceil(this.numberValue));
}
});
};
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie',
events: {
redraw: function() {
var chart = this;
$('.cLabel').attr({
transform: 'translate(' + chart.chartWidth / 2 + ',' + chart.chartHeight / 2 + ')'
})
}
}
},
title: {
text: 'User diversity and their subtotals'
},
yAxis: {
title: {
text: 'User diversity and their subtotals'
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
shadow: false,
borderColor: "#000000",
borderWidth: 0.6
},
series: {
point: {
events: {
click: function() {
addLabel(this)
}
}
}
}
},
tooltip: {
formatter: function() {
return '<b>' + this.point.name + '</b>: ' + this.y + '<br>' + '<b>' + 'Subtotal: ' + '</b>' + this.point.subtotal + ' kr';
}
},
series: [{
data: [{
name: 'Administrative Brugere',
y: 4,
subtotal: 7899.99,
color: "#B83D5A"
}, {
name: 'Begrænsede Brugere',
y: 8,
subtotal: 5799.99,
color: "#9B344C"
}, {
name: 'Resource Bruger',
y: 14,
subtotal: 2399.99,
color: "#7A293C"
}, {
name: 'Ressource',
y: 18,
subtotal: 1299.89,
color: "#5C1F2D"
}],
size: '80%',
innerSize: '82%',
showInLegend: false,
dataLabels: {
enabled: false
}
}]
});
});