###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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/07/10 09:07