使用CSS在React Native中创建自定义图表

Question

我正在尝试使用CSS在React Native中创建一个“半甜甜圈”图表。下面的图表是我正在尝试重新创建的，但这些细分市场很难实现。

这是我到目前为止所得到的：

使用此代码：

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

我似乎无法让细分市场发挥作用。任何想法或建议将不胜感激。

Answer 1

你以正确的方式做，只需放入颜色部分。在以下示例中

＆＃13;

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

A CodePen for this, written in less.