创建具有圆角边缘的 Rechart 条形图
Creating a Rechart barchart with rounded edges
我正在尝试创建这样的条形图,其中条形的长度为 X,并且条形的每一段的长度与其包含的数据的百分比成正比。通过创建垂直布局堆叠条形图,我已经非常接近了,但无法弄清楚如何获得圆形边缘。我已经在 Bar
组件上尝试了 border={x}
,但是它使条形图的两侧都变圆了,我只希望第一个条形图的左侧和第二个条形图的右侧变圆。有什么建议吗?还是我一开始就使用了错误的组件?
这是我目前所拥有的,以及结果的屏幕截图。
const {BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend} = Recharts;
const data = [
{name: '1', a: 50, b: 20, c: 10},
];
const StackedBarChart = React.createClass({
render () {
return (
<BarChart layout="vertical" width={600} height={50} data={data}
margin={{top: 20, right: 30, left: 20, bottom: 5}}>
<XAxis hide type="number"/>
<YAxis hide dataKey="name" type="category"/>
<Tooltip />
<Bar dataKey="a" stackId="a" fill="#8884d8" radius={20} />
<Bar dataKey="b" stackId="a" fill="#8884d8" />
<Bar dataKey="c" stackId="a" fill="black" radius={20}/>
</BarChart>
);
}
})
ReactDOM.render(
<StackedBarChart />,
document.getElementById('container')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.min.js"></script>
<script src="https://unpkg.com/recharts/umd/Recharts.min.js"></script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
不确定为什么该代码段不起作用,所以这里是 JSFiddle https://jsfiddle.net/nur2t39y/
我发现了一个 Github 问题,它显示了一个使用数组作为 radius
道具的示例,允许您为栏的每个角指定半径。 https://github.com/recharts/recharts/issues/793
这是新的工作代码和结果的屏幕截图
const {BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend} = Recharts;
const data = [
{name: '1', a: 50, b: 20, c: 10},
];
const StackedBarChart = React.createClass({
render () {
return (
<BarChart layout="vertical" width={600} height={50} data={data}
margin={{top: 20, right: 30, left: 20, bottom: 5}}>
<XAxis hide type="number"/>
<YAxis hide dataKey="name" type="category"/>
<Tooltip />
<Bar dataKey="a" stackId="a" fill="#8884d8" radius={[10, 0, 0, 10]}/>
<Bar dataKey="b" stackId="a" fill="#82ca9d" />
<Bar dataKey="c" stackId="a" fill="black" radius={[0, 10, 10, 0]}/>
</BarChart>
);
}
})
ReactDOM.render(
<StackedBarChart />,
document.getElementById('container')
);
我正在尝试创建这样的条形图,其中条形的长度为 X,并且条形的每一段的长度与其包含的数据的百分比成正比。通过创建垂直布局堆叠条形图,我已经非常接近了,但无法弄清楚如何获得圆形边缘。我已经在 Bar
组件上尝试了 border={x}
,但是它使条形图的两侧都变圆了,我只希望第一个条形图的左侧和第二个条形图的右侧变圆。有什么建议吗?还是我一开始就使用了错误的组件?
这是我目前所拥有的,以及结果的屏幕截图。
const {BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend} = Recharts;
const data = [
{name: '1', a: 50, b: 20, c: 10},
];
const StackedBarChart = React.createClass({
render () {
return (
<BarChart layout="vertical" width={600} height={50} data={data}
margin={{top: 20, right: 30, left: 20, bottom: 5}}>
<XAxis hide type="number"/>
<YAxis hide dataKey="name" type="category"/>
<Tooltip />
<Bar dataKey="a" stackId="a" fill="#8884d8" radius={20} />
<Bar dataKey="b" stackId="a" fill="#8884d8" />
<Bar dataKey="c" stackId="a" fill="black" radius={20}/>
</BarChart>
);
}
})
ReactDOM.render(
<StackedBarChart />,
document.getElementById('container')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.min.js"></script>
<script src="https://unpkg.com/recharts/umd/Recharts.min.js"></script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
不确定为什么该代码段不起作用,所以这里是 JSFiddle https://jsfiddle.net/nur2t39y/
我发现了一个 Github 问题,它显示了一个使用数组作为 radius
道具的示例,允许您为栏的每个角指定半径。 https://github.com/recharts/recharts/issues/793
这是新的工作代码和结果的屏幕截图
const {BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend} = Recharts;
const data = [
{name: '1', a: 50, b: 20, c: 10},
];
const StackedBarChart = React.createClass({
render () {
return (
<BarChart layout="vertical" width={600} height={50} data={data}
margin={{top: 20, right: 30, left: 20, bottom: 5}}>
<XAxis hide type="number"/>
<YAxis hide dataKey="name" type="category"/>
<Tooltip />
<Bar dataKey="a" stackId="a" fill="#8884d8" radius={[10, 0, 0, 10]}/>
<Bar dataKey="b" stackId="a" fill="#82ca9d" />
<Bar dataKey="c" stackId="a" fill="black" radius={[0, 10, 10, 0]}/>
</BarChart>
);
}
})
ReactDOM.render(
<StackedBarChart />,
document.getElementById('container')
);