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