如何使用 css 和 javascript 创建一个由弧段组成的圆？答案

【问题标题】：How can I create a circle consisting of arc segments using css and javascript?如何使用 css 和 javascript 创建一个由弧段组成的圆？
【发布时间】：2016-09-15 11:47:21
【问题描述】：

我已经在互联网上看了很长时间，但无法找到答案。我对 Web 开发还很陌生，正在尝试学习 css/html 和 javascript。

我想创建一个由 12 段组成的圆圈，并且我还想控制每个段（即能够随意更改颜色，也可能是某种动画，例如段 1 变为红色，然后段2 随后变为蓝色）。

我正在尝试实现类似于此的外观：

每个段最初都是白色的，只有在指定时才会改变颜色。

有人可以为我指明正确的方向吗？

【问题讨论】：

已经有一个关于你的问题的线程，在 stackoverflow stackoverflow.com/questions/14184494/… 上有一个解决方案@
@kkreft 我确实看到了，但我不是想制作切片 - 而是我想要控制弧
stackoverflow.com/questions/14383088/… 我也看了上面的问题，但没有解决方案。那个用户和我有完全相同的问题
sarasoueidan.com/tools/circulus
我不久前用 SVG 做过这个，在这里玩一下：jsfiddle.net/ctrlfrk/k275asjf/5

标签： javascript jquery html css

【解决方案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();

【讨论】：