CSS3餅圖可變比例

在HTML中，我願做這樣的事情：CSS3餅圖可變比例

<div class="thermometer"> 
    <div class="circle purple"> 
    <div class="pie-piece percent=75%"> 
    </div> 
    </div> 
</div>

其中結果將是一個填充了75％，在紫色的圓。（同樣的事情，比薩餅切成4塊，和一件丟失）（75來自數據庫，並且不能在CSS）

我的圈子CSS是這樣的：

.thermometer .circle { 
    position: absolute; 
    width:26px; 
    height:26px; 
    -moz-border-radius:13px; 
    -webkit-border-radius:13px; 
    border-radius:13px; 
    border: 1px solid #000000; 
} 
.thermometer .green { background-color: green; } 
(other colors)

我使用「hold」和「clip」屬性來查看示例，但不知道如何使用變量進行操作。我怎樣才能爲「餅」寫CSS？

來源

2013-01-04 sploiber

如果你指的是this教程，「保持」和「pieSlice1」是類& ID的只是名稱。

您可以預先定義一個度數，然後使用jQuery並根據您從數據庫中獲得的數據更改CSS。查看this發佈瞭解更多信息。

.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});

http://jsfiddle.net/t7zLP/1/

來源

2013-01-04 03:50:12

非常感謝！現在我有一個稍微不同的問題 - 關於將JQuery調用與類匹配。我將在一個單獨的問題中發佈。這工作很好！ – sploiber

卻當真了，有一點延遲，這樣回答。首先，使用畫布繪製（需要檢查它）可能會更好地完成，但僅僅爲了有趣而與LESS + HTML + CSS3以及似乎無論如何都有效的JavaScript JavaScript混合在一起。

這裏是工作示例https://c9.io/dmi3y/css3pie/workspace/index.html 應該適用於所有現代瀏覽器和IE9 +，可能您可以添加對IE版本低於9的支持。爲此需要支持邊界半徑和變換。後者可以用Matrix過濾器來完成，這裏有一些東西可以閱讀，在.htc文件中加上工作解決方案http://samuli.hakoniemi.net/cross-browser-rotation-transformation-with-css/，但是我沒有對它進行測試，個人也不會太在乎舊版瀏覽器。如果您想查看升級瀏覽器，我只需添加通知。另外在FireFox中有一些人工製品，可能是因爲我使用僞類::before和::after，並且可能使用真正的元素會改善這一點。

技術信息。這裏是9cloud代碼https://c9.io/dmi3y/css3pie。核心思想是使用客戶端LESS使用動態生成的CSS。因此，爲了方便和簡單，可以將jQuery代碼轉換爲任何其他庫/核心js。

裏的石頭：

在你的標記

你確定有多少面積應在度

<div class="circle" id="pieOne" data-fill="30deg"></div>

，基本上做它的工作原理，這是你需要的一切來填補。

這是簡短的解釋發生了什麼事情：

以這個數值我重寫LESS變量中嵌入的風格，並與less.refreshStyles()

<style type="text/less" id="lessPie"> 
    @import 'styles/pie'; 
    @fillDegree: #dataDegree#; // from 0deg to 180deg 
    @baseRotate: 40deg; 
</style> 
<script type="text/javascript"> 
    !function(){ 
     var lessPieText = $('#lessPie').text(); 
     $(function(){ 
      var pieOneDataFill = $('#pieOne').attr('data-fill'); 
      while (parseInt(pieOneDataFill) > 180) { 
       pieOneDataFill = (parseInt(pieOneDataFill) - 180) + 'deg'; 
      } 
      while (parseInt(pieOneDataFill) < 0) { 
       pieOneDataFill = (parseInt(pieOneDataFill) + 180) + 'deg'; 
      } 
      $('#lessPie').text(lessPieText.replace('#dataDegree#', pieOneDataFill)); 
      less.refreshStyles(); 

      // update % value 
      // 180deg   = 100% 
      // pieOneDataFill = x% 

      var percentValue = (parseInt(pieOneDataFill) * 100)/180; 
      $('#pieOneLegend').find('span').text(Math.floor(percentValue) + '%').end().show(); 

     }); 
    }() 
</script>

您可以用@baseRotate: 40deg;值旋轉餡餅作爲額外的獎金創建CSS。還顯示％值的圖例。

這幾乎是一切。有一段時間，它只支持一個頁面（或者說一個餅圖）和一個值。之後我會在github上推這個，可能會在項目上工作，因爲它聽起來很有趣。

來源

2013-01-08 05:31:31 dmi3y

剛剛意識到你需要％值設置沒有度，稍後將與LESS一起工作，一段時間可以建議快速的JavaScript轉換隻是simular我怎麼度％轉換 – dmi3y

非常感謝這麼長時間的看這個！！太棒了。現在它只是一點點。我有一個更簡單的版本，需要一點幫助，這是http://jsfiddle.net/sploiber/VJHcH/53/ – sploiber

歡迎您:) bw代碼已經在github上https://github.com/dmi3y/css3piecharts – dmi3y

CSS3餅圖可變比例

回答

相關問題