0

我在面积图中显示了一年的数字，我只想在 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} 来限制刻度量 - 奇怪的是渲染 ca 24 刻度而不是 12，但第一个从边缘开始
  • 摆弄域参数 - 没有结果
  • 尝试使用样式对象和自定义反应元素来呈现刻度。

任何人都可以帮助我吗？

在此处输入图像描述

4

0 回答 0