如何解决在所需位置显示重新图表 xaxis 刻度的问题
我在我的面积图中显示一年的数字,我只想在 Xaxis 上显示月份名称。这就是我现在所拥有的:
<ResponsiveContainer height={350} width="100%">
<AreaChart
data={data}
margin={{
top: 0,right: 0,left: 0,bottom: 0,}}
height={320}
>
<defs>
<linearGradient id="colorGradient" x1="0" y1="0" x2="0" y2="1">
<stop
offset="5%"
stopColor={fullConfig.theme.colors.blue.DEFAULT}
stopOpacity={0.6}
/>
<stop
offset="55%"
stopColor={fullConfig.theme.colors.purple.DEFAULT}
stopOpacity={0.4}
/>
<stop offset="100%" stopColor="#FFFFFF" stopOpacity={0.8} />
</linearGradient>
</defs>
<XAxis
dataKey="date"
tickSize={16}
tickFormatter={yearFormatter}
interval={30}
height={50}
dx={20}
dy={20}
/>
<Tooltip content={<CustomTooltip currency={currency} />} />
<Area
type="monotone"
dataKey="price"
stroke={fullConfig.theme.colors.purple.DEFAULT}
fill="url(#colorGradient)"
/>
</AreaChart>
</ResponsiveContainer>
我的数据是这样的对象数组:
{ 'price': <number>,'date': <Date> },
我已经尝试并试图让勾号(在添加的图像上突出显示)移动到月份名称所在的同一位置。由于同一个月份有多个日期,所以在图表开始的地方打勾对我来说真的并不重要。我最初尝试不在 xAxis 上使用“间隔”,而是使用 tickCount 和 allowDuplicatedCategory 和其他方式,但那些总是显示重复的月份名称。我尝试使用自定义刻度组件,但它只处理渲染标签,而不是移动实际刻度线(在图像上突出显示)。移动刻度线对我来说很重要,因为我希望图形从一个窗口边缘到另一个。到目前为止我尝试过的事情:
- 向轴添加填充 - 向整个图形添加填充,因此图形左侧有空间
- 使用类别作为刻度
- 使用 allowDuplicatedCategory 和 type="category" 渲染 12 个月(渲染回调只从 DateTime 返回月份名称)
- 使用 tickCount={12} 来限制刻度数量 - 奇怪的是渲染了大约 24 个刻度而不是 12 个,但第一个从边缘开始
- 摆弄域参数 - 没有结果
- 尝试使用样式对象和自定义反应元素来呈现刻度。
有人可以帮我吗?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。