使用CSS在React Native中創建自定義圖表

Question

我試圖在React Native中僅使用CSS創建「半環」圖表。下面的圖表是我正在嘗試重新創建的內容，但這些細分市場很難實現。

這是我到目前爲止有：

使用此代碼：

customChart: { 
    width: 200, 
    height: 100, 
    borderTopLeftRadius: 100, 
    borderTopRightRadius: 100, 
    borderWidth: 50, 
    borderStyle: 'solid', 
    borderColor: '#eee', 
    borderBottomWidth: 0, 
    overflow: 'hidden' 
}, 

我似乎無法得到段工作。任何想法或建議將不勝感激。

Answer 1

你這樣做是正確的，只需放在顏色部分。在下面的例子

.criteriometer { 
 
    width: 100px; 
 
    height: 50px; 
 
    border-top-left-radius: 100px; 
 
    border-top-right-radius: 100px; 
 
    border: 50px solid transparent; 
 
    border-bottom: 0; 
 
    position: relative; 
 
} 
 

 
span { 
 
    display: inline-block; 
 
    width: 50px; 
 
    height: 50px; 
 
    border-top-left-radius: 100px; 
 
    border-width: 50px; 
 
    border-style: solid; 
 
    border-bottom: 0 !important; 
 
    border-right: 0 !important; 
 
    position: absolute; 
 
    top: -50px; 
 
    left: -50px; 
 
    transform-origin: right bottom; 
 
} 
 

 
/* from right to left to solve z-index */ 
 
span:first-child { 
 
    border-color: red; 
 
    transform: rotate(90deg); 
 
} 
 
span:nth-child(2) { 
 
    border-color: orange; 
 
    transform: rotate(45deg); 
 
} 
 
span:nth-child(3) { 
 
    border-color: green; 
 
    transform: rotate(0deg); 
 
}

<div class="criteriometer"> 
 
    <span></span> 
 
    <span></span> 
 
    <span></span> 
 
</div>

A CodePen for this, written in less.