JavaScriptにて添付画像のようなドーナツ図を作りたい

JavaScriptにて表記の図形を作成したいのですが、なにか良いライブラリ等はないでしょうか。

canvas機能
customShapes.js
Chart.js

等いくつか見つけたのですが、なかなか近いものが見つからない状況です。
申し訳ないのですが、作成経験のある方がおられましたら
ご教示願いたいです。

やりたいことは以下です
・任意の整数を設定
・数値に応じてドーナツ図を作成(ここを実現したい)
・数値を図の中心に設置

※それぞれ画像にて図形を作成することは避けたいです。

よろしくお願いいたします。

hentaiman

2021/04/09 10:35

> なにか良いライブラリ chart.jsでほぼ十分では？不足している部分の装飾は自分で作るとしても。

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

回答2件

中央の数字は、・・・。ガンバ！

js
1
2<body> 
3<canvas width="500" height="400"> 
4
5</canvas>
6
7<script>
8
9function arc (ctx, x = 0, y = 0, r = 0, b  = 0, e = 0, l = 1, o = 0, c = '#0f0') {
10  const { PI, sin, cos } = Math, deg = PI / 180;
11  let
12    cx = x + sin ((b + e)*.5 * deg) * o,
13    cy = y - cos ((b + e)*.5 * deg) * o,
14    bd = (b-90) * deg,
15    ed = (e-90) * deg;
16  
17  ctx.beginPath ();
18  ctx.lineWidth = l;
19  ctx.strokeStyle = c;
20  ctx.arc (cx, cy, r, ed, bd, true);
21  ctx.stroke();
22}
23
24
25const
26  ctx = document.querySelector ('canvas').getContext ('2d'),
27  data = [
28    [ctx, 100, 100, 60, -45, 45, 30, 4],
29    [ctx, 100, 100, 60, 45, 135, 30, 4],
30    [ctx, 100, 100, 60, 135, 225, 30, 4],
31    [ctx, 100, 100, 60, 225, 315, 30, 4, '#ccc'],
32  ];
33
34data.forEach (dt=> arc(...dt));
35
36</script>
37

投稿2021/04/09 13:55

babu_babu_baboo

総合スコア616

tmp-user

2021/04/12 09:07

ありがとうございます。 canvasを使って記述を試していましたが、うまくドーナツ型に出来ず円形になってしまっていたので大変ありがたいです。頂いたソース、活用させていただきます。

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

ベストアンサー

Chart.jsバージョンです。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6</head>
7<body>
8    <div style="width:300px">
9        <canvas id="chart"></canvas>
10    </div>
11    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
12    <script type="text/javascript">
13
14const N=4;
15let n=3;
16let colors = Array(N).fill('#ebebeb').fill('#00ff60', 0, n);
17let data = {
18    datasets: [{
19        data: Array(N).fill(1),
20        backgroundColor: colors,
21        borderWidth: 10,
22    }],
23};
24let ctx = document.getElementById('chart');
25let chart = new Chart(ctx, {
26    type: 'doughnut',
27    data: data,
28    options: {
29        rotation: -45,
30        events: [],
31    },
32});
33
34    </script>
35</body>
36</html>