reactjs 当type=“category”时,X轴在Rechart散点图中重复

pjngdqdw  于 2023-03-01  发布在  React
关注(0)|答案(2)|浏览(161)

在下面的图片/代码中,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

qv7cva1a

qv7cva1a1#

要解决这个问题,我相信你可以使用allowDuplicatedCategories={false},它在这里的文档:http://recharts.org/en-US/api/XAxis#allowDuplicatedCategory

dtcbnfnu

dtcbnfnu2#

如果allowDuplicatedCategores={false}取消图形中数据的排序,则必须变换每个散射源的数据,使其具有与所有源相同的域点,但与源不对应的每个点为空(必须为空,否则将在0处绘制点)。

如果源A在(hello, 1)处具有单个点,但源B具有两个点(hello, 0)(bye, 2),则它们必须变换为:

sourceA = [{ x: 'hello', y: null }, { x: 'bye', y: 1 }];
sourceB = [{ x: 'hello', y: 0 }, { x: 'bye', y: 2 }];

相关问题