Erstellen eines benutzerdefinierten Diagramms in React Native mit CSS

Question

Ich versuche, ein Diagramm "Half Donut" in React Native erstellen, nur mit CSS. Die folgende Grafik versucht ich neu zu erstellen, aber die Segmente erweisen sich als schwierig.

Das ist, was ich bisher habe:

Mit diesem Code:

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

ich nur scheinen nicht zu arbeiten, die Segmente zu erhalten. Irgendwelche Ideen oder Vorschläge werden sehr geschätzt.

Answer 1

Sie tun es auf die richtige Art und Weise, fügen Sie einfach die Farbbereiche ein. Im folgenden Beispiel

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