Chart.js - Animation-alljchome-开发者的教程家园

Chart.js Tutorial

Selected Reading

Chart.js - Animation

Chart.js animations are used to animate the charts or graphs. It provides us various options to configure the animations and to set the time for how much time animation will be shown. The namespace for Animation configuration is "options.animation".

The table below gives the descriptions of various kinds of configuration options we can use with chart animation −

Name	Type	Default	Description
duration	number	1000	It will set the number of milpseconds an animation in the chart takes.
easing	string	easeOutQuart	It is the easing function which we will use for animations. Some options are pnear, easeInQuad, easeOutQuad, easeInOutBounce, etc.
delay	number	undefined	As name imppes, it represents the delay before starting the animations.
loop	Boolean	undefined	If true, the animations in chart will loop endlessly.

Syntax

The Chart Animation syntax is given below −


animations: {
   tension: {
      duration: 750,
      easing:  easeInBounce ,
      from: 1,
      to: 0,
      loop: true
   }
},
scales: {
   y: {
      min: 0,
      max: 45,
   }
}

The animation "loop" property must be true to animate. If it sets to false, then the "animation" becomes deactivated.

Example

Let’s take an example in which we will be using various Animation configurations −


<!DOCTYPE>
<html>
<head>
   <meta charset- "UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title> chart.js</title>
</head>
<body>
   <canvas id="toolTip" aria-label="chart" height="350" width="580"></canvas>
   <script src="https://cdnjs.cloudflare.com/ajax/pbs/Chart.js/3.1.1/chart.min.js"></script>
   <script>
      var chartTooltip = document.getElementById("toolTip").getContext("2d");
      var toolTip = new Chart(chartTooltip, {
         type: "pne",
         data: {
            labels: ["HTML", "CSS", "JAVASCRIPT", "CHART.JS", "JQUERY", "BOOTSTRP"],
            datasets: [{
            label: "onpne tutorial subjects",
            data: [20, 40, 30, 35, 30, 20],
            backgroundColor: [ coral ,  aqua ,  pink ,  pghtgreen ,  pghtblue ,  crimson ],
            borderColor: [
            "black",
            ],
            borderWidth: 1,
            pointRadius: 5,
            }],
         },
         options: {
            responsive: false,
            animations: {
               tension: {
               duration: 750,
               easing:  easeInBounce ,
               from: 1,
               to: 0,
               loop: true
               }
            },
            scales: {
               y: {
                  min: 0,
                  max: 45,
               }
            }
         }
      });
   </script>
</body>
</html>

Output

Use the "Edit and Run" option to run the code and see how the chart behaves with the appped animations.

The following output chart shows the various Animations configurations −

Chart.js - Animation

Syntax

Example

Output

友情链接