如何使用css和javascript創建由圓弧段組成的圓？

我已經在互聯網上看了很長一段時間了，但無法找到答案。我對web開發相當陌生，並且正在嘗試學習css/html和javascript。如何使用css和javascript創建由圓弧段組成的圓？

我想創建一個由12個段組成的圓，我也想要控制每個段（即能夠隨意更改顏色，也可能是某種動畫，例如段1變爲紅色，然後段2隨後變成藍色）。

我想實現一個類似的外觀：

每段最初是白色和指定時纔會改變顏色。

有人可以請指出我在正確的方向完成這個最好的方式嗎？

來源

2016-09-14 blazerix

已經有關於與計算器http://stackoverflow.com/questions/14184494/segments-in-a-circle-using-css3 – kkreft

@kkreft的解決方案我沒有看到你的問題一個線程，但我米不試圖做切片 - 而是我想控制的弧線 – blazerix

http://stackoverflow.com/questions/14383088/how-to-create-a-certain-configuration-given-below-in-html 我也看着上面的問題，但沒有解決方案。那個用戶和我一樣有問題 – blazerix

您可以使用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();

來源

2016-09-14 23:41:58

如何使用css和javascript創建由圓弧段組成的圓？

回答

相關問題