chart.jsで複数のドーナツ型グラフを数値だけ変えて配置する方法

###chart.jsで複数のドーナツ型グラフを数値だけ変えて配置する方法

chart.jsで複数のドーナツ型グラフを数値だけ変えて配置したいのですが今の所コピペして貼り付ける事を繰り返す方法しか思い浮かばず記述量が多くなってしまいます。何か良い方法はないでしょうか。
作りたいのは下記のようなグラフです。

html
1<div class="html">
2        <canvas id="html"></canvas>
3        <p>80%</p>
4      </div>
5      <div class="css">
6        <canvas id="css"></canvas>
7        <p>70%</p>
8      </div>
9      <div class="js">
10        <canvas id="js"></canvas>
11        <p>35%</p>
12      </div>
13      <div class="jq">
14        <canvas id="jq"></canvas>
15        <p>50%</p>
16      </div>
17
18```script
19var ctx = document.getElementsById("html");
20    var html = new Chart(ctx, {
21    type: 'doughnut',
22    data: {
23      datasets:[{
24        backgroundColor: ["white","#111166"],
25        data: [70,40],
26        borderWidth:[0,0],
27      }]
28    },
29    options: {
30      cutoutPercentage:90,
31      responsive:true,
32      title: {
33        display:true,
34        text:"HTML",
35        fontColor:"white",
36        fontSize:"30",
37        fontStyle:""
38      },
39      tooltips :{
40        enabled: false,
41      }
42    },
43  });
44
45を繰り返す・・・

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

回答1件

ベストアンサー

適当なラッパー関数を作ればいいのでは？

JavaScript
1function drawChart(ctx, text, data) {
2  new Chart(ctx, { ...(略) });
3}
4
5drawChart(document.getElementById("html"), 'HTML', [70, 40]);
6drawChart(document.getElementById("css"), 'CSS', [85, 15]);