四舍五入的民意调查结果

Question

我正在建立一个网站，我的民意调查结果遇到了一些问题。我在谷歌上搜索过，但我还没有找到任何帮助我的东西。我尝试过css，但它完全不起作用。我只是得到一个白色的块。我试图让民意调查结果如下：

但我不能。我该怎么做呢。

这是我目前的代码：

.Yellow {
  background-color: rgb( 255, 255, 255 );
  position: absolute;
  left: 132px;
  top: 836px;
  width: 164px;
  height: 165px;
  z-index: 260;
}
.Green {
  background-color: rgb( 182, 183, 182 );
  position: absolute;
  left: 132px;
  top: 836px;
  width: 164px;
  height: 165px;
  z-index: 259;
}
.Red {
  background-color: rgb( 81, 108, 120 );
  position: absolute;
  left: 132px;
  top: 836px;
  width: 164px;
  height: 165px;
  z-index: 258;
}
.Cyan {
  background-color: rgb( 220, 177, 61 );
  position: absolute;
  left: 132px;
  top: 836px;
  width: 164px;
  height: 165px;
  z-index: 257;
}

Html：

<div class="Yellow"></div>
                <div class="Green"></div>
                <div class="Cyan"></div>
                <div class="Red"></div>`

Answer 1

使用css获取类似的内容非常困难，我建议在画布中使用javascript绘制它。

你会有类似的东西：

var ctx = document.getElementById('myCanvas').getContext('2d');
ctx.strokeWidth = 10;

ctx.beginPath();
ctx.strokeColor = color1;
ctx.arc(x,y, 0, angle1);
ctx.stroke()

ctx.beginPath();
ctx.strokeColor = color2;
ctx.arc(x,y, angle1, angle2);
ctx.stroke()

...

其中x，y是圆的中心，color1，color1等是每种颜色的字符串，percent1，percent2等是每个段开始和结束的角度。

你也可以用html5的svg支持来做这件事，但我不太熟悉它，我认为浏览器不支持它（虽然可能是错的）。