防止 Recharts 刻度线重叠答案

【问题标题】：Prevent Recharts Tick Marks from Overlapping防止 Recharts 刻度线重叠
【发布时间】：2020-10-29 08:34:58
【问题描述】：

我正在开发一个应用程序，它允许用户选择动态查询的数据，然后可以在 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 文档

Github Recharts 回购

StackOverflow 帖子

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

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

【问题讨论】：

标签： javascript reactjs charts recharts

【解决方案1】：

我遇到了同样的问题，最终删除了 interval 属性，该属性将刻度设置为动态但只有 4 或 5 个刻度。

所以我将minTickGap 设置为某个负值。结果是轴上出现了更多的刻度

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

之前

之后：

【讨论】：