首页 > 解决方案 > Recharts ScatterChart Y 轴类别问题

问题描述

我有一个非常简单的问题,但我无法找到解决方案。我想更改 Rechart 的 X 和 Y 轴<ScatterChart/>

这是原始 Rechart 演示的链接https://jsfiddle.net/alidingling/uLysj0u2/

这是我的代码。

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 轴: 在此处输入图像描述

如果我改变 X 和 Y 轴,我得到的结果: 在此处输入图像描述

如果 type="number" 可以正常工作,但我需要类别。

标签: reactjsrecharts

解决方案


推荐阅读