一、效果图
二、绘图使用了RN中的ART ,
对于每段的计算需要注意
1.角度计算应该转换为弧度,转换公式如下:
/**
* 角度转弧度
* @param angle
* @returns {number}
*/
degress2Radians(angle){
return angle / 180.0 * 3.1415926;
};
2.当前段的起始角度应该等于上一段的终端角度,对于第一段通常用0作为起始角度
这里直接给出起始角度的计算公式,假设数据是用数组传进来的
var stratAngle = 0;
var endAngle = 0;
if (i === 0) {
stratAngle = 0;
} else {
for (let j = 0; j < i; j++) {
stratAngle += itemArray[j].degress; //前面的角度累加
}
}
for (let j = 0; j <= i; j++) { //前面的角度累加
endAngle += itemArray[j].degress;
}
return (
<Wedge key={i}
outerRadius={outerRadius}
innerRadius={innerRadius}
startAngle={stratAngle}
endAngle={endAngle}
originX={chartWidth / 2 + outerRadius * Math.sin(this.degress2Radians(stratAngle))}
originY={chartHeight / 2 - outerRadius * Math.cos(this.degress2Radians(stratAngle))}
fill={itemArray[i].color}/>
);
})}
三、全部源码:
import React, {
Component,
} from 'react';
import {
View,
ART,
} from 'react-native';
import Wedge from './Wedge';
import PropTypes from 'prop-types';
const {Surface, Shape, Path} = ART;
/**
* Created by 刘胡来
* Date on 2019.04.26
* Copyright 2013 - 2019 QianTuo Inc. All Rights Reserved
* Desc:环形统计图
*/
export default class CircularChart extends Component {
static propTypes = {
itemArray: PropTypes.array,
chartWidth: PropTypes.number,
chartHeight: PropTypes.number,
outerRadius: PropTypes.number,
innerRadius: PropTypes.number,
}
constructor(props) {
super(props);
};
render() {
let {chartWidth, chartHeight, outerRadius,innerRadius,itemArray}=this.props;
return (
<View style={
{flex: 1, backgroundColor: '#F5F5F9'}}>
<Surface width={chartWidth} height={chartHeight} style={
{backgroundColor: 'yellow', marginTop: 10}}>
{itemArray.map((name, i) => {
var stratAngle = 0;
var endAngle = 0;
if (i === 0) {
stratAngle = 0;
} else {
for (let j = 0; j < i; j++) {
stratAngle += itemArray[j].degress;
}
}
for (let j = 0; j <= i; j++) {
endAngle +=