Highcharts - 用于数据显示的 js 计数器问题

Question

我目前正在尝试将计数器动画添加到单击我创建的圆环图的特定切片后呈现的值，计数器将计数到附加到该特定切片的数据值，但是动画是从中间数据可以看出，对于较大的数字来说非常慢。

我想知道如何加快动画速度，以及如何将值显示为带小数的双精度值，现在当您将鼠标悬停在图表的切片上时，工具提示会显示正确的值，例如 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
    )};

• 动画太慢了
• 不显示带小数的值（双精度）
• 当您单击另一个值时，如果计数器已经在计数，则计数器开始出现故障（可能会随着动画速度的提高而修复）

jsFiddle

Answer 1

请检查下面我的cmets，它可能对你有帮助

1. 动画太慢了

   • 在图表中使用持续时间选项 - 如下所示的动画

     chart:{
            animation: { duration: 10 }
           }
     

2. 不显示带小数的值（双精度）

   • 将j 替换为point.y，因为j 是一个整数值。

3. 当你点击另一个值时，如果它已经在计数，计数器就会开始出现故障（可能会随着动画速度的提高而修复）

   • 动画速度可以通过减少持续时间来增加。

请检查下面的sn-p。

$(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>

Answer 2

这是我的解决方案，也是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
            }
        }]
    });
});