在下面的图片/代码中,hi、hello和bye应该只出现一次。你知道为什么会重复吗?
在浏览器中编辑此处:http://jsfiddle.net/ndLhnegs/318/编辑:我在这里举了另一个更简单的例子:http://jsfiddle.net/7coegorj/2/
React再查组件:
const {Scatter, ScatterChart, XAxis, YAxis, CartesianGrid, Tooltip, Legend} = Recharts;
const Chart = React.createClass({
render(){
const selected = [
{value:'obj1',label:'Obj1'},
{value:'obj2',label:'Obj2'},
{value:'obj3',label:'Obj3'},
{value:'obj4',label:'Obj4'},
]
const scatters = selected.map((s) => {
let data = [
{x:'hi',y:Math.random() * 10},
{x:'hello',y:Math.random() * 10},
{x:'bye',y:Math.random() * 10},
]
return (
<Scatter
key={s.label}
name={s.label}
data={data}
fill='#000'
line
shape="cross" />
);
});
return (
<ScatterChart width={600} height={400} margin={{ top: 20, right: 20, bottom: 20, left: 20 }}>
<XAxis dataKey='x' name='Macro' />
<YAxis type="number" dataKey={'y'} name='Grams' unit='g' />
<CartesianGrid />
<Tooltip cursor={{ strokeDasharray: '3 3' }} />
<Legend />
{scatters}
</ScatterChart >
);
}
})
ReactDOM.render(
<Chart />,
document.getElementById('container')
);
在此处提交GitHub问题-https://github.com/recharts/recharts/issues/1034
2条答案
按热度按时间qv7cva1a1#
要解决这个问题,我相信你可以使用
allowDuplicatedCategories={false}
,它在这里的文档:http://recharts.org/en-US/api/XAxis#allowDuplicatedCategorydtcbnfnu2#
如果
allowDuplicatedCategores={false}
取消图形中数据的排序,则必须变换每个散射源的数据,使其具有与所有源相同的域点,但与源不对应的每个点为空(必须为空,否则将在0处绘制点)。即
如果源A在
(hello, 1)
处具有单个点,但源B具有两个点(hello, 0)
和(bye, 2)
,则它们必须变换为: