I want to change the animation of the initial display of Highcharts.

In Highcharts, pie pie in the pie chart is usually animated radially from the center, but I want to stop this.Do you know how to do it?

javascript jquery highcharts

2022-09-30 20:59

2 Answers

You want to stop the initial display animation.

It can be controlled by plotOptions.pie.animation.

Although Pie chart demo mentioned in the document has animation enabled, we created no animation demo with the animation=false specified above.
I don't think the latter has a radial animation.

Below is an excerpt of the options you added:

$(function(){
    $('#container').highcharts({
        Short for short
        ,
        plotOptions: {
            pie: {
                animation:false,
                allowPointSelect: true,
                cursor: 'pointer',
                Short for short
        },
        Short for short
    });
});

2022-09-30 20:59

When you think that the standard animation is a combination of "diameter-increasing movement" and "fan-like movement of folded graphs," you want to disable only the former

The pie chart animation is defined by the seriesTypes.pie.prototype.animate method, which can be overridden to customize the animation.If you only want to disable "Radius Increasing Movement", comment out the action where radius r starts at zero.

//Override Pie Chart Animation Method
Highcharts.seriesTypes.pie.prototype.animate=function(init){
    var series = this,
        points = series.points,
        startAngleRad = series.startAngleRad;
    if(!init){
        Highcharts.each(points, function(point){
            vargraphic=point.graphic,
                args = point.shapeArgs;
            if(graphic){
                graphic.attr({
                    // Disable Scaling
                    //r:point.startR||(series.center[3]/2),
                    start —startAngleRad,
                    end —startAngleRad
                });
                graphic.animate({
                    // Disable Scaling
                    //r —args.r,
                    start —args.start,
                    end —args.end
                }, series.options.animation);
             }
        });
        series.animate=null;
    }
};

For more information, see Enable scaling only in pie chart animation

2022-09-30 20:59

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656