重新绘制折线图 'Y'轴范围问题

发布于 2025-01-09 22:01:58 字数 2373 浏览 1 评论 0原文

我有一个显示多行数据的折线图,一切都按预期工作,唯一的问题是,当显示图表时,图表本身内部有巨大的空白,我一直在检查我发送的数据范围,但看起来很好,所有值都出现,也一直在检查一些样式问题,但我似乎没有看到任何奇怪的东西,遗憾的是文档对于样式方面非常有限,我还无法找到解决方案。

<ResponsiveContainer aspect={10.0 / 3.0}>
          <LineChart margin={{left: 30, top: 30}} width={730} height={300}>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis
              dataKey="month"
              type="category"
              allowDuplicatedCategory={false}
              allowDecimals={false}
            />
            <YAxis
              padding={{top: 28}}
              interval={0}
              ticks={range}
              tickSize={2}
              tickFormatter={val => getLocaleString(val)}
              label={{
                value: 'EUR',
                position: {x: 40, y: 0},
                className: 'chart__label',
              }}
            />
            <Tooltip />
            <Legend
              onMouseOver={mouseOverLegend}
              onMouseLeave={mouseLeaveLegend}
            />
            {data.map((data, index) => {
              const namePostfix = `EUR ${yearsDataChart[index]}`
              const stroke =
                hoverIndex === index || !legendHover
                  ? colorsChart[index]
                  : COLOR_HOVER
              const costName = `${translate('cost')} ${namePostfix}`
              const revenueName = `${translate('revenue')} ${namePostfix}`

              return [
                <>
                  <Line
                    dataKey="revenue"
                    data={data}
                    name={revenueName}
                    stroke={stroke}
                  />
                  <Line
                    dataKey="cost"
                    data={data}
                    name={costName}
                    stroke={
                      hoverIndex === index || !legendHover
                        ? colorsChartProvider[index]
                        : stroke
                    }
                  />
                </>,
              ]
            })}
          </LineChart>
        </ResponsiveContainer>

结果是:

在此处输入图像描述

希望有人知道这里可能存在什么问题

I have a line chart that displays several lines of data, everything works as expected, the only issue is that when the chart is displayed there is huge blank space inside the chart itself, I have been checking the data range I am sending but seems fine, all values appear, have been also checking for some styling issue but I dont seem to see anything strange, sadly the docs are very limited for the styling regard that I am not able yet to find a solution.

<ResponsiveContainer aspect={10.0 / 3.0}>
          <LineChart margin={{left: 30, top: 30}} width={730} height={300}>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis
              dataKey="month"
              type="category"
              allowDuplicatedCategory={false}
              allowDecimals={false}
            />
            <YAxis
              padding={{top: 28}}
              interval={0}
              ticks={range}
              tickSize={2}
              tickFormatter={val => getLocaleString(val)}
              label={{
                value: 'EUR',
                position: {x: 40, y: 0},
                className: 'chart__label',
              }}
            />
            <Tooltip />
            <Legend
              onMouseOver={mouseOverLegend}
              onMouseLeave={mouseLeaveLegend}
            />
            {data.map((data, index) => {
              const namePostfix = `EUR ${yearsDataChart[index]}`
              const stroke =
                hoverIndex === index || !legendHover
                  ? colorsChart[index]
                  : COLOR_HOVER
              const costName = `${translate('cost')} ${namePostfix}`
              const revenueName = `${translate('revenue')} ${namePostfix}`

              return [
                <>
                  <Line
                    dataKey="revenue"
                    data={data}
                    name={revenueName}
                    stroke={stroke}
                  />
                  <Line
                    dataKey="cost"
                    data={data}
                    name={costName}
                    stroke={
                      hoverIndex === index || !legendHover
                        ? colorsChartProvider[index]
                        : stroke
                    }
                  />
                </>,
              ]
            })}
          </LineChart>
        </ResponsiveContainer>

the result is :

enter image description here

hope someone has an idea of what could be the issue here

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文