绘制带有类别的ScatterChart Y轴问题

Question

我遇到了一个非常简单的问题，但找不到解决方案。我想更改图表<ScatterChart/>的X和Y轴。

以下是原始图表演示contextvars

的链接

这是我的代码。

const {ScatterChart, Scatter, XAxis, YAxis, CartesianGrid, Tooltip, Legend} 
= Recharts;
const data = [{name: "T1", val: 100}, {name: "T2", val: 200},
              {name: "T3", val: 300}]

const SimpleScatterChart = React.createClass({
    render () {
return (
<ScatterChart width={400} height={400} margin={{top: 20, right: 20, 
    bottom: 20, left: 20}}>
    <CartesianGrid />
    <XAxis dataKey={'val'} type="number" />
    <YAxis dataKey={'name'} type="category" />
    <Scatter name='A school' data={data} fill='#8884d8'/>
  </ScatterChart>
);}})

ReactDOM.render(
  <SimpleScatterChart />,
  document.getElementById('container')
);

我想要但未更改X和Y轴的结果： https://jsfiddle.net/alidingling/uLysj0u2/

如果更改X和Y轴，则会得到结果：

如果type =“ number”可以正常工作，但是我需要类别。