javascript - 防止 Recharts 刻度线重叠

Question

我正在开发一个应用程序，它允许用户选择动态查询的数据，然后可以在 Recharts 可视化中使用这些数据。在某些极端情况下，recharts 中的默认格式/渲染会产生丑陋的结果。例如，如果有许多唯一值传递给 <XAxis />组件，则生成的图表可能会有重叠的刻度文本。
好像没有什么好的 "尽可能多地渲染刻度，不重叠"文档中描述的选项。这些似乎是唯一的选择:

渲染所有刻度(显然会导致太多刻度)

            <XAxis
              dataKey={xAxisField.name}
              name={getXAxisLabel(xAxisField, chartType)}
              tickFormatter={
                getMetaDataType(xAxisField) ===
                "DATE"
                  ? tickEpochFormatter // force numbers to be displayed as 'YYYY-MM-DD'
                  : tickNumberFormatter
              }
              allowDataOverflow={false}
              ticks={xValues.sort()} // gets all of the values
              interval={0} // display all of values, instead of the default 5
              angle={-90} // force text to be 90, reading towards the graph
              textAnchor="end" // rather than setting "dy={50}" or something
            >

仅渲染开始/结束/开始和结束，这在旋转之前(似乎)完全取决于文本的宽度。

            <XAxis
              dataKey={xAxisField.name}
              name={getXAxisLabel(xAxisField, chartType)}
              tickFormatter={
                getMetaDataType(xAxisField) ===
                "DATE"
                  ? tickEpochFormatter // force numbers to be displayed as 'YYYY-MM-DD'
                  : tickNumberFormatter
              }
              allowDataOverflow={false}
              ticks={xValues.sort()} // gets all of the values
              interval="preserveStart" // ensure that everything can be read, giving preference to the "left"???
              angle={-90} // force text to be 90, reading towards the graph
              textAnchor="end" // rather than setting "dy={50}" or something
            >

硬编码间隔数以确保最大值？我不确定这是否是一个可行的选择，因为我需要知道有多少滴答声真正重叠。这似乎是一种粗略的方法。

是否有可能让 Recharts 渲染尽可能多的东西，即使它们旋转 90 度，然后有选择地选择有足够空间显示的东西？是否有可能拥有 angle属性根据刻度标记文本的长度动态更新？
这是一个链接列表，似乎没有一个可以回答这些问题:
Recharts 文档

Recharts XAxis Docs

Recharts LineChartAxisInterval Docs

Github Recharts 仓库

Show all ticks

Vertical Axis Label

Rotated Axis Labels

Rotate tick text

Axis Labels Display Over Data

Axis Labels Look Awful

Last XAxis label not aligned with tick mark when rotated -45 degrees

Prevent hiding of tick labels

Missing ticks on x-axis

Long strings in labels generate overlap in YAxis for horizontal barchart

StackOverflow 帖子

Scalable YAxis Label

Display all XAxis ticks

YAxis Ticks don't auto calculate

Set Label Margin

这是我要清理的有问题的渲染的图片:

另外，请注意，通常我更愿意坚持使用我一直在使用的同一个库，但如果另一个库更适合这个用例，我想考虑切换!

Answer 1

我遇到了同样的问题，最终删除了 interval将刻度设置为动态但只有 4 或 5 个刻度的属性。
所以我设置了minTickGap到一些负值。结果是轴上出现了更多的刻度

 <XAxis dataKey="date"
        angle={45}
        dx={15}
        dy={20}
        minTickGap={-200}
        axisLine={false}/>

之前

之后 :