reactjs - 撰写图表静态 Y 轴值
问题描述
目前我正在使用 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}
/>
解决方案
我认为您必须在 Yaxis 中添加一个属性 interval={0} 才能显示所有值
推荐阅读
- javascript - 如何将数据从当前 page1.html 复制到 window.open('page2.html')
- python-3.x - 检查 BGP 状态
- javascript - 谷歌搜索框需要移动到屏幕中间(X:0 Y:0)
- php - 为什么这个在数组中添加数组的函数不起作用?
- python - 在 Mac 10.14.5 上安装 python 包 psycopg2 时出错
- angular - 使用 UIKit 和 Angular 进行测试
- liquid - 获取 Thinkific 模板的课程 url 变量(液体语言)
- typescript - 如何将属性更改为类中使用的静态值?
- java - 在使用 2 个分区创建的 Azure 事件中心中,事件中心使用者尝试连接到第 3 和第 4 分区
- python - 将数据帧堆叠在另一个数据帧之上