|
| 1 | +# Initial animations |
| 2 | + |
| 3 | +```js chart-editor |
| 4 | +// <block:setup:4> |
| 5 | +const DATA_COUNT = 12; |
| 6 | +const MIN = 10; |
| 7 | +const MAX = 100; |
| 8 | + |
| 9 | +const numberCfg = {count: DATA_COUNT, min: MIN, max: MAX}; |
| 10 | + |
| 11 | +const data = { |
| 12 | + labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], |
| 13 | + datasets: [{ |
| 14 | + data: Utils.numbers(numberCfg) |
| 15 | + }] |
| 16 | +}; |
| 17 | +// </block:setup> |
| 18 | + |
| 19 | +// <block:annotation1:1> |
| 20 | +const annotation1 = { |
| 21 | + type: 'point', |
| 22 | + backgroundColor: 'rgba(0, 150, 0, 0.2)', |
| 23 | + borderColor: 'rgba(0, 150, 0)', |
| 24 | + borderRadius: 4, |
| 25 | + borderWidth: 1, |
| 26 | + init: true, |
| 27 | + label: { |
| 28 | + display: true, |
| 29 | + content: 'Fade', |
| 30 | + textAlign: 'center' |
| 31 | + }, |
| 32 | + radius: 40, |
| 33 | + xMax: 6.5, |
| 34 | + xMin: 4.5, |
| 35 | + yMax: 60, |
| 36 | + yMin: 40 |
| 37 | +}; |
| 38 | +const labelAnnotation1 = { |
| 39 | + type: 'label', |
| 40 | + init: true, |
| 41 | + content: 'Fade', |
| 42 | + xMax: 6.5, |
| 43 | + xMin: 4.5, |
| 44 | + yMax: 60, |
| 45 | + yMin: 40 |
| 46 | +}; |
| 47 | +// </block:annotation1> |
| 48 | + |
| 49 | +// <block:annotation2:2> |
| 50 | +const annotation2 = { |
| 51 | + type: 'point', |
| 52 | + backgroundColor: 'rgba(0, 150, 0, 0.2)', |
| 53 | + borderColor: 'rgba(0, 150, 0)', |
| 54 | + borderRadius: 4, |
| 55 | + borderWidth: 1, |
| 56 | + init: () => ({centerY: 0}), |
| 57 | + label: { |
| 58 | + display: true, |
| 59 | + content: 'Flyin from top', |
| 60 | + textAlign: 'center' |
| 61 | + }, |
| 62 | + radius: 40, |
| 63 | + xMax: 2.5, |
| 64 | + xMin: 0.5, |
| 65 | + yMax: 30, |
| 66 | + yMin: 10 |
| 67 | +}; |
| 68 | +const labelAnnotation2 = { |
| 69 | + type: 'label', |
| 70 | + init: () => ({y: 0, y2: 0, width: 0, height: 0}), |
| 71 | + content: 'Flyin from top', |
| 72 | + xMax: 2.5, |
| 73 | + xMin: 0.5, |
| 74 | + yMax: 30, |
| 75 | + yMin: 10 |
| 76 | +}; |
| 77 | +// </block:annotation2> |
| 78 | + |
| 79 | +// <block:annotation3:3> |
| 80 | +const annotation3 = { |
| 81 | + type: 'point', |
| 82 | + backgroundColor: 'rgba(0, 150, 0, 0.2)', |
| 83 | + borderColor: 'rgba(0, 150, 0)', |
| 84 | + borderRadius: 4, |
| 85 | + borderWidth: 1, |
| 86 | + init: () => ({centerX: 0}), |
| 87 | + label: { |
| 88 | + display: true, |
| 89 | + content: 'Flyin from left', |
| 90 | + textAlign: 'center' |
| 91 | + }, |
| 92 | + radius: 40, |
| 93 | + xMax: 10.5, |
| 94 | + xMin: 8.5, |
| 95 | + yMax: 90, |
| 96 | + yMin: 70 |
| 97 | +}; |
| 98 | +const labelAnnotation3 = { |
| 99 | + type: 'label', |
| 100 | + init: () => ({x: 0, x2: 0, width: 0, height: 0}), |
| 101 | + content: 'Flyin from left', |
| 102 | + xMax: 10.5, |
| 103 | + xMin: 8.5, |
| 104 | + yMax: 90, |
| 105 | + yMin: 70 |
| 106 | +}; |
| 107 | +// </block:annotation3> |
| 108 | + |
| 109 | +/* <block:config:0> */ |
| 110 | +const config = { |
| 111 | + type: 'line', |
| 112 | + data, |
| 113 | + options: { |
| 114 | + scales: { |
| 115 | + y: { |
| 116 | + beginAtZero: true, |
| 117 | + max: 100, |
| 118 | + min: 0 |
| 119 | + } |
| 120 | + }, |
| 121 | + plugins: { |
| 122 | + annotation: { |
| 123 | + common: { |
| 124 | + drawTime: 'afterDraw' |
| 125 | + }, |
| 126 | + annotations: { |
| 127 | + annotation1, |
| 128 | + labelAnnotation1, |
| 129 | + annotation2, |
| 130 | + labelAnnotation2, |
| 131 | + annotation3, |
| 132 | + labelAnnotation3 |
| 133 | + } |
| 134 | + } |
| 135 | + } |
| 136 | + } |
| 137 | +}; |
| 138 | +/* </block:config> */ |
| 139 | + |
| 140 | +const actions = [ |
| 141 | + { |
| 142 | + name: 'Randomize', |
| 143 | + handler: function(chart) { |
| 144 | + chart.data.datasets.forEach(function(dataset, i) { |
| 145 | + dataset.data = dataset.data.map(() => Utils.rand(MIN, MAX)); |
| 146 | + }); |
| 147 | + chart.update(); |
| 148 | + } |
| 149 | + } |
| 150 | +]; |
| 151 | + |
| 152 | +module.exports = { |
| 153 | + actions: actions, |
| 154 | + config: config, |
| 155 | +}; |
| 156 | +``` |
0 commit comments