CSS를 사용하여 React Native에서 커스텀 차트 만들기

Question

CSS 만 사용하여 React Native에서 'half donut'차트를 만들려고합니다. 아래의 차트는 내가 재창조하려는 부분이지만 세그먼트가 어렵다고 판명되었습니다.

이 코드를 사용 :

이것은 내가 지금까지있어 무엇

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.

에서