Css民意測驗結果舍入

我正在建立一個網站，我的民意調查結果有些麻煩。我在谷歌搜索，我還沒有找到任何幫助我。我試過一個CSS，但它完全無法工作。我只是得到一個白色的塊。我試圖使投票結果是這樣的：Css民意測驗結果舍入

enter image description here

，但我不能。我將如何做到這一點。

這裏是我當前的代碼：

.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>`

來源

2014-02-22 user3339454

爲什麼不使用像http://www.highcharts.com/demo/pie-donut這樣的圖表？ – Exlord

我想你需要html5來製作一個這樣的形狀 – Exlord

獲得類似的東西，將與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爲圓，顏色1，顏色1的中心等都是字符串爲每種顏色和percent1，percent2等都是角度開始和結束每個細分。

你也可以用html5的svg支持來做到這一點，但我不太瞭解這一點，而且我認爲它不如瀏覽器支持（儘管可能是錯誤的）。

來源

2014-02-22 05:21:48 Thayne

Css民意測驗結果舍入

回答

相關問題