撰写图表静态 Y 轴值

问题描述

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

我需要域 [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}
  />

解决方法

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