在所需位置显示重新图表 xaxis 刻度的问题

如何解决在所需位置显示重新图表 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 个,但第一个从边缘开始
  • 摆弄域参数 - 没有结果
  • 尝试使用样式对象和自定义反应元素来呈现刻度。

有人可以帮我吗?

enter image description here

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其他元素将获得点击?
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。)
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么?
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么?
如何在Java中聆听按键时移动图像。
Java“Program to an interface”。这是什么意思?
Java在半透明框架/面板/组件上重新绘画。
Java“ Class.forName()”和“ Class.forName()。newInstance()”之间有什么区别?
在此环境中不提供编译器。也许是在JRE而不是JDK上运行?
Java用相同的方法在一个类中实现两个接口。哪种接口方法被覆盖?
Java 什么是Runtime.getRuntime()。totalMemory()和freeMemory()?
java.library.path中的java.lang.UnsatisfiedLinkError否*****。dll
JavaFX“位置是必需的。” 即使在同一包装中
Java 导入两个具有相同名称的类。怎么处理?
Java 是否应该在HttpServletResponse.getOutputStream()/。getWriter()上调用.close()?
Java RegEx元字符(。)和普通点?