撰写图表静态 Y 轴值答案

【问题标题】：Compose Chart Static Y-Axis value撰写图表静态 Y 轴值
【发布时间】：2021-06-11 18:05:08
【问题描述】：

目前我正在使用 Rechart 的 Compose Chart，我有两个 Y 轴（左和右）。无论条形和线条的值如何，我都能使我的右 y 轴显示 0-100%。但是，我的左 y 轴会自动缩放，并且域和滴答计数似乎无法协同工作。

我需要 domain[0, 'datamax'] 以便我的线路始终处于 100%，请查看我当前的代码。

我希望我的左右 y 轴显示 0-100%。

<ComposedChart
  width={setWidth}
  height={setHeight}
  data={chartData}
  margin={{
    top: 20,
    right: 80,
    bottom: 20,
    left: 20,
  }}
  className={classes.textSize}
>
  <CartesianGrid stroke="#f5f5f5" />
  <XAxis
    dataKey="name"
    scale="band"
    interval={0}
    tick={<CustomizedAxisTick />}
  />
  <YAxis
    yAxisId="left"
    orientation="left"
    label={{
      value: 'Porcentaje',
      angle: -90,
      position: 'insideLeft',
      fill: theme.palette.text.primary,
    }}
    domain={[0, 'datamax']}
    tickCount={11}
    tick={<CustomYAxisTicks />}
  />
  <YAxis
    yAxisId="right"
    orientation="right"
    ticks={ticks}
    tickCount={11}
    tick={{ fill: theme.palette.text.primary }}
  />
  <Bar yAxisId="left" dataKey="pv" barSize={30} fill="#FC6A03" />
  <Line
    yAxisId="left"
    type="monotone"
    dataKey="amt"
    stroke="#eaed40"
    dot={<CustomizedDot />}
    isAnimationActive={false}
  />

【问题讨论】：

标签： reactjs charts recharts

【解决方案1】：

我认为您必须在 Yaxis 中添加一个属性 interval={0} 才能显示所有值

【讨论】：