###実現したいこと
- ドーナツグラフ
- 円グラフに対する線形グラデーション
- ドーナツグラフの真ん中に数値を表示する
- 真ん中の数値をカウントアップ(ダウン)アニメーションをつける
Chart.jsを使っています。
あるデータを取ってきて、その割合をアニメーションでドーナツグラフの真ん中に表示させたいです。現段階ではランダムな値でデータ更新をしています。
他の質問などを参考にさせて頂いてグラフの真ん中に数値を表示させることはできたのですが、カウントアップ(ダウン)アニメーションの実装方法が分からないので教えていただきたいです。
他のライブラリにカウントアップアニメーションがついているものがあるのですが、円グラフに対して線形グラデーションをつけたいので今のところchart.js(2.x)を使っています。
他のライブラリで線形グラデーションをつけられるものもあれば、そのライブラリでの実装でも全く構いません。
追記
カウントアップアニメーションは以下のようなイメージです。不明確な表現で申し訳ないです。
よろしくお願いします。
以下ソースコードです。
###ソースコード
HTML
1<!DOCTYPE html> 2<head> 3 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 4 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> 5</head> 6<html> 7<body> 8<canvas id="myChart"></canvas> 9<script> 10 Chart.pluginService.register({ 11 afterUpdate: function (chart) { 12 if (chart.config.options.elements.center) { 13 var helpers = Chart.helpers; 14 var centerConfig = chart.config.options.elements.center; 15 var globalConfig = Chart.defaults.global; 16 var ctx = chart.chart.ctx; 17 var fontStyle = helpers.getValueOrDefault(centerConfig.fontStyle, globalConfig.defaultFontStyle); 18 var fontFamily = helpers.getValueOrDefault(centerConfig.fontFamily, globalConfig.defaultFontFamily); 19 if (centerConfig.fontSize) 20 var fontSize = centerConfig.fontSize; 21 else { 22 ctx.save(); 23 var fontSize = helpers.getValueOrDefault(centerConfig.minFontSize, 1); 24 var maxFontSize = helpers.getValueOrDefault(centerConfig.maxFontSize, 256); 25 var maxText = helpers.getValueOrDefault(centerConfig.maxText, centerConfig.text); 26 do { 27 ctx.font = helpers.fontString(fontSize, fontStyle, fontFamily); 28 var textWidth = ctx.measureText(maxText).width; 29 if (textWidth < chart.innerRadius * 2 && fontSize < maxFontSize) 30 fontSize += 1; 31 else { 32 fontSize -= 1; 33 break; 34 } 35 } while (true) 36 ctx.restore(); 37 } 38 39 chart.center = { 40 font: helpers.fontString(fontSize, fontStyle, fontFamily), 41 fillStyle: helpers.getValueOrDefault(centerConfig.fontColor, globalConfig.defaultFontColor) 42 }; 43 } 44 }, 45 afterDraw: function (chart) { 46 if (chart.center) { 47 var centerConfig = chart.config.options.elements.center; 48 var ctx = chart.chart.ctx; 49 50 ctx.save(); 51 ctx.font = chart.center.font; 52 ctx.fillStyle = chart.center.fillStyle; 53 ctx.textAlign = 'center'; 54 ctx.textBaseline = 'middle'; 55 var centerX = (chart.chartArea.left + chart.chartArea.right) / 2; 56 var centerY = (chart.chartArea.top + chart.chartArea.bottom) / 2; 57 ctx.fillText(centerConfig.text, centerX, centerY); 58 ctx.restore(); 59 } 60 }, 61 }) 62 63 var ctx = document.getElementById("myChart").getContext("2d"); 64 65 var gradient = ctx.createLinearGradient(600, 0, 0, 200); 66 gradient.addColorStop(0,'rgb(160, 240, 216)'); 67 gradient.addColorStop(1,'rgb(212, 222, 246)'); 68 69 var rand = Math.random()*100; 70 var config = { 71 type: 'doughnut', 72 data: { 73 datasets: [{ 74 data: [ 75 rand, 76 100- rand 77 ], 78 backgroundColor: [ 79 gradient, 80 "#d6d6d6", 81 ], 82 }], 83 }, 84 85 options: { 86 maintainAspectRatio: false, 87 events: [], 88 cutoutPercentage :65, 89 elements: { 90 arc: { 91 borderWidth: 0 92 }, 93 center: { 94 maxText: '100%', 95 text: this.Math.floor(rand)+"%", 96 fontColor: 'rgb(15, 33, 58)', 97 fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", 98 fontStyle: 'normal', 99 minFontSize: 1, 100 maxFontSize: 46, 101 }, 102 }, 103 }, 104 105 }; 106 107 var myChart = new Chart(ctx, config); 108 109 setInterval(function(){ 110 rand = Math.random()*100; 111 myChart.data.datasets[0].data[0] = rand; 112 myChart.data.datasets[0].data[1] = 100- rand; 113 myChart.options.elements.center.text = Math.floor(rand)+"%"; 114 myChart.update(); 115 },1500); 116</script> 117</body> 118</html>