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

如何解决Recharts - 调整 yAxis 笛卡尔网格的位置

如何将我的 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>

解决方法

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

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

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

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

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>
    );
  }
}