cssとjavascriptを使用して円弧セグメントからなる円を作成するにはどうすればよいですか？

Question

私は今かなり長い間インターネットを見てきましたが、答えを見つけることができません。私はかなりWeb開発には新しく、CSS/htmlとjavascriptを学ぼうとしています。

私は12個のセグメントからなる円を作成したいと思います。また、各セグメントを制御したいと考えています（つまり、色を自由に変えることができます。セグメント2はその後青色に変わる）。

私はこれに似た外観を実現しようとしている：

各セグメントは、最初は白で、指定された場合にのみ色が変わります。

誰かがこれを達成するための最善の方法を正しい方向に向けることができますか？

Answer 1

ChartJSのドーナツチャートを使用できます。ドーナツを12の等しいデータグループに分割するようにしてください（私の例では、すべての12のデータポイントに対して1を使用します）。これにより、すべて同じサイズになります。次に、色を個別に制御し、後でチャートを更新することができます。

https://jsfiddle.net/8t8tmc0q/

必要HTML：

<canvas id="myChart" width="400" height="400"></canvas> 

とJavaScript：

Chart.defaults.global.legend.display = false; 
var ctx = document.getElementById("myChart"); 
var myChart = new Chart(ctx, { 
    type: 'doughnut', 
    data: { 
    labels: ['1','2','3','4','5','6','7','8','9','10','11','12'], 
    datasets: [{ 
     data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], 
     backgroundColor: [ 
     'white', 
     'white', 
     'white', 
     'white', 
     'white', 
     'white', 
     'white', 
     'white', 
     'white', 
     'white', 
     'white', 
     'white' 
     ], 
     borderColor: 'black', 
     borderWidth: 1 
    }] 
    } 
}); 

その後、色を更新するために、あなたはちょうどあなたが更新したい部分を指定し、使用myChart.update()変更を描画する関数：

myChart.data.datasets[0].backgroundColor[5] = 'red' 
myChart.update();