Doughnut

Doughnut - 图1

RandomizeAdd DatasetAdd DataHide(0)Show(0)Hide (0, 1)Show (0, 1)Remove DatasetRemove Data

config setup actions

  1. const config = {
  2. type: 'doughnut',
  3. data: data,
  4. options: {
  5. responsive: true,
  6. plugins: {
  7. legend: {
  8. position: 'top',
  9. },
  10. title: {
  11. display: true,
  12. text: 'Chart.js Doughnut Chart'
  13. }
  14. }
  15. },
  16. };
  1. const DATA_COUNT = 5;
  2. const NUMBER_CFG = {count: DATA_COUNT, min: 0, max: 100};
  3. const data = {
  4. labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue'],
  5. datasets: [
  6. {
  7. label: 'Dataset 1',
  8. data: Utils.numbers(NUMBER_CFG),
  9. backgroundColor: Object.values(Utils.CHART_COLORS),
  10. }
  11. ]
  12. };
  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: 0, max: 100});
  7. });
  8. chart.update();
  9. }
  10. },
  11. {
  12. name: 'Add Dataset',
  13. handler(chart) {
  14. const data = chart.data;
  15. const newDataset = {
  16. label: 'Dataset ' + (data.datasets.length + 1),
  17. backgroundColor: [],
  18. data: [],
  19. };
  20. for (let i = 0; i < data.labels.length; i++) {
  21. newDataset.data.push(Utils.numbers({count: 1, min: 0, max: 100}));
  22. const colorIndex = i % Object.keys(Utils.CHART_COLORS).length;
  23. newDataset.backgroundColor.push(Object.values(Utils.CHART_COLORS)[colorIndex]);
  24. }
  25. chart.data.datasets.push(newDataset);
  26. chart.update();
  27. }
  28. },
  29. {
  30. name: 'Add Data',
  31. handler(chart) {
  32. const data = chart.data;
  33. if (data.datasets.length > 0) {
  34. data.labels.push('data #' + (data.labels.length + 1));
  35. for (let index = 0; index < data.datasets.length; ++index) {
  36. data.datasets[index].data.push(Utils.rand(0, 100));
  37. }
  38. chart.update();
  39. }
  40. }
  41. },
  42. {
  43. name: 'Hide(0)',
  44. handler(chart) {
  45. chart.hide(0);
  46. }
  47. },
  48. {
  49. name: 'Show(0)',
  50. handler(chart) {
  51. chart.show(0);
  52. }
  53. },
  54. {
  55. name: 'Hide (0, 1)',
  56. handler(chart) {
  57. chart.hide(0, 1);
  58. }
  59. },
  60. {
  61. name: 'Show (0, 1)',
  62. handler(chart) {
  63. chart.show(0, 1);
  64. }
  65. },
  66. {
  67. name: 'Remove Dataset',
  68. handler(chart) {
  69. chart.data.datasets.pop();
  70. chart.update();
  71. }
  72. },
  73. {
  74. name: 'Remove Data',
  75. handler(chart) {
  76. chart.data.labels.splice(-1, 1); // remove the label first
  77. chart.data.datasets.forEach(dataset => {
  78. dataset.data.pop();
  79. });
  80. chart.update();
  81. }
  82. }
  83. ];

Docs