Chart.js、ドーナツグラフのデータのカウントアップ(ダウン)アニメーション表示

###実現したいこと

ドーナツグラフ
円グラフに対する線形グラデーション
ドーナツグラフの真ん中に数値を表示する
真ん中の数値をカウントアップ(ダウン)アニメーションをつける

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>

namimon

2017/07/14 23:32

カウントアップアニメーションとは、具体的にどのようなものでしょうか。参考にできるものを提示していただけますか。

行動規範の内容に同意します

回答2件

charjsのAnimationの項目を見ると、アニメーション中にコールバックを呼び出す方法が書かれています。
これを利用して、アニメーションの進捗状況を知ることができます。

ご質問のコードではafterUpdate, afterDrawコールバックを用いてチャートの中心にテキストを描画するようになっていますが、チャート更新中のアニメーションでもafterDrawが呼ばれますので、中心に描画すべきテキストを「固定的なテキスト」ではなく「progressの値によって現在表示すべきテキストを計算するような関数」とすればお望みのことはできそうです。

オプションは次のように・・・

javascript
1var progress = 0;
2var conifig {
3  ...
4  options: {
5    ...
6    elements: {
7      ...
8      center: {
9        maxText: '100%',
10        textFunc: function () { return '0%' }, // *** FAIL SAFE
11        //text: this.Math.floor(rand)+"%",     // *** 固定的なテキストではうまくない
12        ...
13      },
14    },
15    animation: {
16      onProgress: function(animation) {
17        var cur = animation.animationObject.currentStep,
18            total = animation.animationObject.numSteps;
19        progress = cur / total;
20      },
21      onComplete: function() {
22        progress = 1;
23      }
24    }
25  }
26};

そしてsetIntervalは次のように・・・

javascript
1var rand = Math.random()*100,
2    oldValue = 0, newValue = rand;
3...
4setInterval(function() {
5  rand = Math.random()*100;
6  oldValue = newValue;
7  newValue = rand;
8
9  myChart.data.datasets[0].data[0] = rand;
10  myChart.data.datasets[0].data[1] = 100- rand;
11  //myChart.options.elements.center.text = Math.floor(rand)+"%"; // ***固定的なテキストではうまくない
12  myChart.options.elements.center.textFunc = function() {
13    var v = progress * newValue + (1 - progress) * oldValue;
14    return Math.floor(v)+"%"
15  };
16  myChart.update();
17},1500);

あとは元のコードでoptions.elements.center.textを参照していた箇所をoptions.elements.center.textFunc()に置き換えればほぼ期待通りの動きにできると思います。

ちなみにアニメーションカープはリニアではなくeasingオプションに応じて様々な変化のしかとなるようですが、onProgressコールバックの呼ばれ方を見ると、リニアな進捗度しか求められないように見えました。onProgressが呼び出される時間間隔とprogressの上がり方の比率をデバッグプリントしてみると、easingがeaseOutQuart(デフォルト値でリニアな変化でない)にも関わらずprogressがリニアに変化しているような感じです。そのあたりは真面目に考える程の問題ではないと思いますが・・・

投稿2017/07/15 02:35

KSwordOfHaste

総合スコア18394

こういう解釈でしょうか。
サンプル

javascript
1 Chart.pluginService.register({
2        afterUpdate: function (chart) {
3            if (chart.config.options.elements.center) {
4                var helpers = Chart.helpers;
5                var centerConfig = chart.config.options.elements.center;
6                var globalConfig = Chart.defaults.global;
7                var ctx = chart.chart.ctx;
8                var fontStyle = helpers.getValueOrDefault(centerConfig.fontStyle, globalConfig.defaultFontStyle);
9                var fontFamily = helpers.getValueOrDefault(centerConfig.fontFamily, globalConfig.defaultFontFamily);
10                if (centerConfig.fontSize)
11                    var fontSize = centerConfig.fontSize;
12                else {
13                    ctx.save();
14                    var fontSize = helpers.getValueOrDefault(centerConfig.minFontSize, 1);
15                    var maxFontSize = helpers.getValueOrDefault(centerConfig.maxFontSize, 256);
16                    var maxText = helpers.getValueOrDefault(centerConfig.maxText, centerConfig.text);
17                    do {
18                        ctx.font = helpers.fontString(fontSize, fontStyle, fontFamily);
19                        var textWidth = ctx.measureText(maxText).width;
20                        if (textWidth < chart.innerRadius * 2 && fontSize < maxFontSize)
21                            fontSize += 1;
22                        else {
23                            fontSize -= 1;
24                            break;
25                        }
26                    } while (true)
27                    ctx.restore();
28                }
29
30                chart.center = {
31                    font: helpers.fontString(fontSize, fontStyle, fontFamily),
32                    fillStyle: helpers.getValueOrDefault(centerConfig.fontColor, globalConfig.defaultFontColor)
33                };
34
35            }
36        },
37
38    })
39
40    var ctx = document.getElementById("myChart").getContext("2d");
41
42    var gradient = ctx.createLinearGradient(600, 0, 0, 200);
43    gradient.addColorStop(0,'rgb(160, 240, 216)');
44    gradient.addColorStop(1,'rgb(212, 222, 246)');
45
46    var rand = Math.random()*100;
47    var config = {
48            type: 'doughnut',
49            data: {
50                datasets: [{
51                    data: [
52                        rand,
53                        100- rand
54                    ],
55                    backgroundColor: [
56                          gradient,
57                          "#d6d6d6",
58                    ],
59                }],
60            },
61
62            options: {
63                maintainAspectRatio: false,
64                events: [],
65                cutoutPercentage :65,
66                elements: {
67                    arc: {
68                         borderWidth: 0
69                    },
70                    center: {
71                        maxText: '100%',
72                        text: this.Math.floor(rand)+"%",
73                        fontColor: 'rgb(15, 33, 58)',
74                        fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
75                        fontStyle: 'normal',
76                        minFontSize: 1,
77                        maxFontSize: 46,
78                    },
79                },
80                animation: {
81                    onProgress: function(animation) {
82                      var currentPercent =   animation.animationObject.currentStep / animation.animationObject.numSteps  ;
83                      var currentValue = Math.floor ( (  this.data.datasets[0].data[0] * currentPercent ) )  ;
84                      var ctx = this.ctx ;
85
86                      ctx.save();
87                      ctx.font = this.center.font;
88                      ctx.fillStyle = this.center.fillStyle;
89                      ctx.textAlign = 'center';
90                      ctx.textBaseline = 'middle';
91                      var centerX = (this.chartArea.left + this.chartArea.right) / 2;
92                      var centerY = (this.chartArea.top + this.chartArea.bottom) / 2;
93                      ctx.fillText( currentValue + "%"  , centerX, centerY );
94                      ctx.restore();
95                    }
96                },
97            },
98
99    };
100
101    var myChart = new Chart(ctx, config);
102
103    setInterval(function(){
104        rand = Math.random()*100;
105        myChart.data.datasets[0].data[0] = rand;
106        myChart.data.datasets[0].data[1] = 100- rand;
107        myChart.update();     
108    },1500);