Untitled diff

Created Diff never expires
13 删除
总计
删除
单词
总计
删除
要继续使用此功能,请升级到
Diffchecker logo
Diffchecker Pro
80
15 添加
总计
添加
单词
总计
添加
要继续使用此功能,请升级到
Diffchecker logo
Diffchecker Pro
82
const { VictoryChart, VictoryBar,VictoryPie ,
const { VictoryChart, VictoryBar,VictoryPie ,
VictoryAxis, VictoryLegend, VictoryLabel ,VictoryTheme} = Victory;
VictoryAxis, VictoryLegend, VictoryLabel ,VictoryTheme} = Victory;
const colors = [
const colors = [
'#F56D00', '#9F3AB7', '#64CCE9', '#32120A',
'#F56D00', '#9F3AB7', '#64CCE9', '#32120A',
'#F8984C', '#BB75CC', '#92DBEF', '#6F5953',
'#F8984C', '#BB75CC', '#92DBEF', '#6F5953',
'#FABD8C', '#D4A6DE', '#B9E8F5', '#A39491']
'#FABD8C', '#D4A6DE', '#B9E8F5', '#A39491']
class DonutChart extends React.Component {
class DonutChart extends React.Component {


static propTypes = {
static propTypes = {
data: PropTypes.arrayOf(PropTypes.object).isRequired,
data: PropTypes.arrayOf(PropTypes.object).isRequired,
width: PropTypes.number.isRequired,
width: PropTypes.number.isRequired,
height: PropTypes.number.isRequired,
height: PropTypes.number.isRequired,
innerRadius: PropTypes.number.isRequired
innerRadius: PropTypes.number.isRequired
}
}


render() {
render() {
let { data, innerRadius, width, height } = this.props
let { data, innerRadius, width, height } = this.props
const colorScale = colors.slice(0, data.length)
const colorScale = colors.slice(0, data.length)
const total = data.reduce((a, b) => ({ y: a.y + b.y }))
const total = data.reduce((a, b) => ({ y: a.y + b.y }))
const viewBox = `0 0 ${width} ${height}`


const legendDataWithStyle = data.map((dateItem, index) => {
const legendDataWithStyle = data.map((dateItem, index) => {
return { name : dateItem.x, symbol: { fill: colors[index], type: "square" } }
return { name : dateItem.x, symbol: { fill: colors[index], type: "square" } }
}
}
)
)




return (
return (
<div style={{ width: width + 100, height: height + 100 }} >
<div style={{ width: width + 100, height: height + 100 }} >
<svg viewBox={viewBox}>
<svg width={width + 100} height={height}>


<VictoryPie
<VictoryPie
standalone={false}
standalone={false}
width={width} height={height}
width={width} height={height}
data={data}
data={data}
innerRadius={innerRadius}
innerRadius={innerRadius}
colorScale={colorScale}
colorScale={colorScale}
/>
/>
<VictoryLabel
<VictoryLabel
textAnchor="middle"
textAnchor="middle"
style={{ fontSize: 20 }}
style={{ fontSize: 20 }}
x={width / 2} y={height / 2}
x={width / 2} y={height / 2}
text={total.y}
text={total.y}
/>
/>
<g transform="translate(40,0)">
<VictoryLegend x={width} y={30}
title="Totals"
centerTitle
orientation="vertical"
gutter={20}
style={{
title: { fontSize: 15 }
}}
data={legendDataWithStyle}
standalone={false}
/>
</g>


<VictoryLegend x={width - 50} y={30}
title="Totals"
centerTitle
orientation="vertical"
gutter={20}
style={{
title: { fontSize: 15 }
}}
data={legendDataWithStyle}
standalone={false}
/>






</svg>
</svg>
</div>
</div>
)
)
}
}
}
}


const dounutData = [
const dounutData = [
{ x: 'a', y: 1 }, { x: 'b', y: 2 }, { x: 'c', y: 3 },
{ x: 'a', y: 1 }, { x: 'b', y: 2 }, { x: 'c', y: 3 },
{ x: 'd', y: 4 }, { x: 'e', y: 2 }, { x: 'f', y: 6 }
{ x: 'd', y: 4 }, { x: 'e', y: 2 }, { x: 'f', y: 6 }
];
];




ReactDOM.render(
ReactDOM.render(
<DonutChart data={dounutData} width={300} height={300}
<DonutChart data={dounutData} width={300} height={300}
innerRadius={68} />,
innerRadius={68} />,
document.getElementById('container')
document.getElementById('container')
);
);