Recharts - 调整 yAxis 笛卡尔网格的位置答案

【问题标题】：Recharts - Adjust the position of the yAxis cartesian gridRecharts - 调整 yAxis 笛卡尔网格的位置
【发布时间】：2021-01-28 09:24:08
【问题描述】：

如何将我的 yAxis 笛卡尔网格调整为位于条形的开头而不是中心，并沿 y 轴延伸到条形区域上方，如第二张图所示。 Click to view image

另外，我怎样才能显示从一个条到另一个条的斜率，如下图所示？

这是我的代码

       <ResponsiveContainer height={250} width={"100%"} >
        <BarChart data={data}>
          <YAxis
            dataKey="total"
            tickFormatter={(tick) => {
              if(tick >= 1000 && tick < 1000000) return ((tick / 1000) + 'K')
              else if (tick >= 1000000)return ((tick / 1000000) + 'M');
              else return tick;
            }}
            label={<AxisLabel>Number of Items</AxisLabel>}
          />
          <XAxis dx={-20} dataKey="product" xAxisId={0} tick={{ fontSize: 16 }} dy={10} />
          <XAxis dx={-20} dy={-10} orientation="top" xAxisId={1} dataKey="product" tick={{ fontSize: 16 }} />
          <CartesianGrid strokeDasharray="8" stroke="#DFE2E6" />
          <Tooltip cursor={{ fill: "transparent" }} />
          {dataKeys && dataKeys.map((itemKey, idx) => 
          <Bar key={itemKey + idx} dataKey={itemKey} fill={colors[idx]} stackId="a" barSize={80}></Bar>)}
        </BarChart>
      </ResponsiveContainer>

【问题讨论】：

标签： reactjs d3.js graph frontend recharts

【解决方案1】：

您可以在这里找到一些非常好的示例： http://recharts.org/en-US/

另外，看看这个例子： http://recharts.org/en-US/examples/ComposedChartWithAxisLabels

这个小sn-p基本上是基于第二个的。请注意，为了解决网格调整，我只是在左侧添加了一个空栏。这样，只有右侧的堆叠条可见。

要显示“斜率”，您只需添加一个与原始数据具有相同值的面积图。

const data = [
  {
    name: 'Page A', uv: 96, pv: 800, amt: 800,
  },
  {
    name: 'Page B', uv: 452, pv: 967, amt: 967,
  },
  {
    name: 'Page C', uv: 512, pv: 1098, amt: 1098,
  },
  {
    name: 'Page D', uv: 248, pv: 1200, amt: 1200,
  },
  {
    name: 'Page E', uv: 300, pv: 1108, amt: 1108,
  },
  {
    name: 'Page F', uv: 185, pv: 680, amt: 680,
  },
];

class Example extends PureComponent {

  render() {
    return (
      <ComposedChart
        width={500}
        height={400}
        data={data}
        margin={{
          top: 20, right: 20, bottom: 20, left: 20,
        }}
      >
        <CartesianGrid strokeDasharray="8" stroke="#DFE2E6" />
        <XAxis type="category" dataKey="name" />
        <YAxis type="number" />
        <Tooltip />
        <Legend />
        <Area dataKey="amt" fill="#808080" stroke="#505050" />
        <Bar dataKey="" barSize={20} fill="#ffffffff" />
        <Bar dataKey="pv" stackId="a" barSize={20} fill="#413ea0" />
        <Bar dataKey="uv" stackId="a" barSize={20} fill="#909090" />
      </ComposedChart>
    );
  }
}

【讨论】：

【解决方案2】：

您可以使用 y 轴定位

 .recharts-yAxis .recharts-text {
    transform: translate(-50px, 0);
 }

或者只是添加tick={{ dx: -7 }}

   <YAxis
        dataKey="total"
        tick={{ dx: -7 }}
        tickFormatter={(tick) => {
          if(tick >= 1000 && tick < 1000000) return ((tick / 1000) + 'K')
          else if (tick >= 1000000)return ((tick / 1000000) + 'M');
          else return tick;
        }}
        label={<AxisLabel>Number of Items</AxisLabel>}
      />

【讨论】：