时间戳

首页 > 解决方案 > Recharts - 调整 yAxis 笛卡尔网格的位置

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

问题描述

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

另外，如下图所示，如何显示从一个条到另一个条的斜率？

在此处输入图像描述

这是我的代码

       <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>

标签： reactjsd3.jsgraphfrontendrecharts

解决方案

您可以使用 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>}
      />

推荐阅读