Animation Progress Bar

Initial animation

Other animations

Animation Progress Bar - 图1

Randomize Add Dataset Add Data Remove Dataset Remove 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');
  3. const DATA_COUNT = 7;
  4. const NUMBER_CFG = {count: DATA_COUNT, min: -100, max: 100};
  5. const labels = Utils.months({count: 7});
  6. const data = {
  7. labels: labels,
  8. datasets: [
  9. {
  10. label: 'Dataset 1',
  11. data: Utils.numbers(NUMBER_CFG),
  12. borderColor: Utils.CHART_COLORS.red,
  13. backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5),
  14. },
  15. {
  16. label: 'Dataset 2',
  17. data: Utils.numbers(NUMBER_CFG),
  18. borderColor: Utils.CHART_COLORS.blue,
  19. backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue, 0.5),
  20. }
  21. ]
  22. };
  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});
  32. for (var index = 0; index < data.datasets.length; ++index) {
  33. data.datasets[index].data.push(Utils.rand(-100, 100));
  34. }
  35. chart.update();
  36. }
  37. }
  38. },
  39. {
  40. name: 'Remove Dataset',
  41. handler(chart) {
  42. chart.data.datasets.pop();
  43. chart.update();
  44. }
  45. },
  46. {
  47. name: 'Remove Data',
  48. handler(chart) {
  49. chart.data.labels.splice(-1, 1); // remove the label first
  50. chart.data.datasets.forEach(dataset => {
  51. dataset.data.pop();
  52. });
  53. chart.update();
  54. }
  55. }
  56. ];

Initial animation finished