在 Recharts 中選擇 Y 軸上的間隔

Question

在YAxis我要求它是 0 1000 2000 3000，需要 1000 的間隔，但我得到的是 0 2500 5000 7500 10000 請讓我知道如何設置間隔

data = [
  {
    "name": "Jan 2021",
    "Product A": 3432,
    "Procuct B": 2342
  },
  {
    "name": "Feb 2021",
    "Product A": 2342,
    "Procuct B": 3246
  },
  {
    "name": "Mar 2021",
    "Product A": 4565,
    "Procuct B": 4556
  },
  {
    "name": "Apr 2021",
    "Product A": 6654,
    "Procuct B": 4465
  },
  {
    "name": "May 2021",
    "Product A": 8765,
    "Procuct B": 4553
  }
];

render() {
  return (
    <LineChart width={730} height={250} data={this.data}>
      {/* <CartesianGrid strokeDasharray="3 3" /> */}
      <CartesianGrid stroke="#eee" strokeDasharray="5 5"/>

      <XAxis dataKey="name" />
      <YAxis type="number" domain={[0, 10000]}/>
      <Tooltip />
      <Legend />
      <Line type="monotone" dataKey="Product A" stroke="#0095FF" />
      <Line type="monotone" dataKey="Procuct B" stroke="#FF0000" />
    </LineChart>
  );
};

謝謝您的幫助

輸出

Answer 1

在一個軸上，默認有 5 個刻度。

為了顯示所有的數千蜱（1000，2000，等等），你需要設置tickCount上的YAxis至11 ，如下所示：

<YAxis type="number" domain={[0, 10000]} tickCount={11} />

但是您還需要將圖表的高度設置得更大，否則無法正確顯示所有刻度。 為此，您只需更新LineChart組件中的height LineChart ：

<LineChart width={730} height={500} data={data}> // <-- just here
  <CartesianGrid stroke="#eee" strokeDasharray="5 5"/>
  <YAxis type="number" domain={[0, 10000]} tickCount={11}/>
  <Tooltip />
  <Legend />
  <Line type="monotone" dataKey="Product A" stroke="#0095FF" />
  <Line type="monotone" dataKey="Procuct B" stroke="#FF0000" />
</LineChart>

結果如下圖所示：