Q&A
変な動きとは具体的にどのような動きのことでしょうか？
グラフ描画時に回転するようにグラフがかかれるアニメーションを指すのならanimateRotateをfalseにすれば止められます。
chart.jsのドーナツグラフをゲージに見立てて、タイマーを作れないかと思っていました。しかし、動作サンプルを作ってみたところ、ゲージが更新されるたびに変な動きをするので、向いていないような気がします。
適切なライブラリがアレば教えてもらえますか？
chart.jsで出来るならそれが一番ですが。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"> </script> </head> <body> <div id="container"> <button id="button"> ボタン </button> <canvas id="chart_cv"></canvas> <canvas id="chart"></canvas> </div> <script type="text/javascript"> //model const button = document.getElementById("button"); //controller button.addEventListener("click" , function() { let data = timer_data["datasets"][0].data[0]; timer_data["datasets"][0].data[0] -= 10; console.log(data); updata_canvas(); }); // データ --- (*1) let timer_data = {labels: ['残り時間','経過時間'], datasets: [ {label: '残り時間',data:[50,50]} ] } updata_canvas(); function updata_canvas() { const ctx = document.getElementById('chart_cv') const chart_cv = new Chart(ctx, { type: 'doughnut', // グラフの種類 data: timer_data, // データ backgroundColor : 'rgba(90,193,255,1)',//塗りつぶす色 options: {} }) // オプション } </script> </body> </html>
クリックするたびにグラフが描かれる処理ですね。
animateRotateの処理を追加してみます。
そもそも、chart.jsはプログレスバーを作るのに適切なライブラリなんでしょうか？
プログレスバー作成主体なら他の人が書かれているようにprogressbar.jsが適しているかと思います。
今回はプログレスバーを作りたいのですが、いろいろなグラフを作りたいのならchart.jsということですよね。chart.jsでもプログレスバーは作れるようなので、今回はこちらを使ってみようと思います。
アニメーションの件も停止出来ました。
回答1件
0
ベストアンサー
ProgressBar.js 辺りが適しているかと思います。
私はタイマーとして使ったことはありませんが、元々進捗状況を表現するためのライブラリなので、細かい数値変更にはピッタリなはずです。
投稿2021/09/16 00:49
総合スコア1685
回答ありがとうございます。
調べて使ってみます。
chart jsとの違いはわかりますか？
https://www.chartjs.org/docs/3.4.0/samples/advanced/progress-bar.html
探したらchart.jsでもプログレスバーに使えるようでした。
そうなんですね。
でしたら、chart.jsでもタイマーが実現可能かもしれません。
あなたの回答
tips
プレビュー
