|
| 1 | +const canvas = document.createElement('canvas'); |
| 2 | +canvas.width = 512; |
| 3 | +canvas.height = 512; |
| 4 | +const ctx = canvas.getContext('2d'); |
| 5 | + |
| 6 | +module.exports = { |
| 7 | + config: { |
| 8 | + type: 'doughnut', |
| 9 | + data: { |
| 10 | + labels: ['A', 'B', 'C', 'D', 'E'], |
| 11 | + datasets: [{ |
| 12 | + data: [1, 5, 10, 50, 100], |
| 13 | + backgroundColor: [ |
| 14 | + 'rgba(255, 99, 132, 0.8)', |
| 15 | + 'rgba(54, 162, 235, 0.8)', |
| 16 | + 'rgba(255, 206, 86, 0.8)', |
| 17 | + 'rgba(75, 192, 192, 0.8)', |
| 18 | + 'rgba(153, 102, 255, 0.8)' |
| 19 | + ], |
| 20 | + borderWidth: 4, |
| 21 | + borderColor: [ |
| 22 | + 'rgb(255, 99, 132)', |
| 23 | + 'rgb(54, 162, 235)', |
| 24 | + 'rgb(255, 206, 86)', |
| 25 | + 'rgb(75, 192, 192)', |
| 26 | + 'rgb(153, 102, 255)' |
| 27 | + ] |
| 28 | + }] |
| 29 | + }, |
| 30 | + options: { |
| 31 | + animation: { |
| 32 | + duration: 800, |
| 33 | + easing: 'linear' |
| 34 | + }, |
| 35 | + responsive: false, |
| 36 | + plugins: { |
| 37 | + legend: false, |
| 38 | + title: false, |
| 39 | + tooltip: false, |
| 40 | + filler: false |
| 41 | + } |
| 42 | + }, |
| 43 | + plugins: [{ |
| 44 | + id: 'hide', |
| 45 | + afterInit(chart) { |
| 46 | + chart.toggleDataVisibility(4); |
| 47 | + } |
| 48 | + }] |
| 49 | + }, |
| 50 | + options: { |
| 51 | + canvas: { |
| 52 | + height: 512, |
| 53 | + width: 512 |
| 54 | + }, |
| 55 | + run: function(chart) { |
| 56 | + const animator = Chart.animator; |
| 57 | + const start = animator._getAnims(chart).items[0]._start; |
| 58 | + animator._running = false; |
| 59 | + return new Promise((resolve) => setTimeout(() => { |
| 60 | + for (let i = 0; i < 16; i++) { |
| 61 | + animator._update(start + i * 50); |
| 62 | + let x = i % 4 * 128; |
| 63 | + let y = Math.floor(i / 4) * 128; |
| 64 | + ctx.drawImage(chart.canvas, x, y, 128, 128); |
| 65 | + } |
| 66 | + Chart.helpers.clearCanvas(chart.canvas); |
| 67 | + chart.ctx.drawImage(canvas, 0, 0); |
| 68 | + resolve(); |
| 69 | + }, 100)); |
| 70 | + } |
| 71 | + } |
| 72 | +}; |
0 commit comments