Animation Progress Bar

Initial animation

Other animations

Animation Progress Bar - 图1

RandomizeAdd DatasetAdd DataRemove DatasetRemove Data

config setup actions Output

  1. const config = {
  2.   type: 'line',
  3.   data: data,
  4.   options: {
  5.     animation: {
  6.       duration: 2000,
  7.       onProgress: function(context) {
  8.         if (context.initial) {
  9.           initProgress.value = context.currentStep / context.numSteps;
  10.         } else {
  11.           progress.value = context.currentStep / context.numSteps;
  12.         }
  13.       },
  14.       onComplete: function(context) {
  15.         if (context.initial) {
  16.           console.log('Initial animation finished');
  17.         } else {
  18.           console.log('animation finished');
  19.         }
  20.       }
  21.     },
  22.     interaction: {
  23.       mode: 'nearest',
  24.       axis: 'x',
  25.       intersect: false
  26.     },
  27.     plugins: {
  28.       title: {
  29.         display: true,
  30.         text: 'Chart.js Line Chart - Animation Progress Bar'
  31.       }
  32.     },
  33.   },
  34. };
  1. const initProgress = document.getElementById('initialProgress');
  2. const progress = document.getElementById('animationProgress');
  4. const DATA_COUNT = 7;
  5. const NUMBER_CFG = {count: DATA_COUNT, min: -100, max: 100};
  7. const labels = Utils.months({count: 7});
  8. const data = {
  9.   labels: labels,
  10.   datasets: [
  11.     {
  12.       label: 'Dataset 1',
  13.       data: Utils.numbers(NUMBER_CFG),
  14.       borderColor: Utils.CHART_COLORS.red,
  15.       backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5),
  16.     },
  17.     {
  18.       label: 'Dataset 2',
  19.       data: Utils.numbers(NUMBER_CFG),
  20.       borderColor: Utils.CHART_COLORS.blue,
  21.       backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue, 0.5),
  22.     }
  23.   ]
  24. };
  1. const actions = [
  2.   {
  3.     name: 'Randomize',
  4.     handler(chart) {
  5.       chart.data.datasets.forEach(dataset => {
  6.         dataset.data = Utils.numbers({count: chart.data.labels.length, min: -100, max: 100});
  7.       });
  8.       chart.update();
  9.     }
  10.   },
  11.   {
  12.     name: 'Add Dataset',
  13.     handler(chart) {
  14.       const data = chart.data;
  15.       const dsColor = Utils.namedColor(chart.data.datasets.length);
  16.       const newDataset = {
  17.         label: 'Dataset ' + (data.datasets.length + 1),
  18.         backgroundColor: Utils.transparentize(dsColor, 0.5),
  19.         borderColor: dsColor,
  20.         data: Utils.numbers({count: data.labels.length, min: -100, max: 100}),
  21.       };
  22.       chart.data.datasets.push(newDataset);
  23.       chart.update();
  24.     }
  25.   },
  26.   {
  27.     name: 'Add Data',
  28.     handler(chart) {
  29.       const data = chart.data;
  30.       if (data.datasets.length > 0) {
  31.         data.labels = Utils.months({count: data.labels.length + 1});
  33.         for (let index = 0; index < data.datasets.length; ++index) {
  34.           data.datasets[index].data.push(Utils.rand(-100, 100));
  35.         }
  37.         chart.update();
  38.       }
  39.     }
  40.   },
  41.   {
  42.     name: 'Remove Dataset',
  43.     handler(chart) {
  44.       chart.data.datasets.pop();
  45.       chart.update();
  46.     }
  47.   },
  48.   {
  49.     name: 'Remove Data',
  50.     handler(chart) {
  51.       chart.data.labels.splice(-1, 1); // remove the label first
  53.       chart.data.datasets.forEach(dataset => {
  54.         dataset.data.pop();
  55.       });
  57.       chart.update();
  58.     }
  59.   }
  60. ];

Initial animation finished

Docs