javascript - 在 Plotly Javascript 中跳过重叠的刻度标签

标签 javascript plotly axis-labels

我们在 Plotly.JS 中使用散点图在较大的 X 范围内显示二维图形数据,因此我们使用对数缩放。缩放和平移效果很好,除了一个小问题:X 刻度标签令人困惑,因为 Plotly 使用个位数标签表示次要(非 10 的幂)刻度:

default tick format

我可以使用 tickFormat: '0.1s' 来显示实数(这是用户想要的)而不是单个数字,但是在某些情况下这些标签可以重叠:

format with 'tickformat: '0.1s''

我还可以添加dtick: 'D2',它只显示位置 2 和 5 的子刻度,而不是所有数字,但这是固定的,不会调整继续缩放。

理想情况下,我可以指定要完全跳过标签(但不是垂直线)的子刻度标签数字,不必求助于 tickmode: array 并具有手动指定所有刻度标签,并且仍然受益于根据缩放比例进行的自动刻度调整。 例如,如果显示所有 subtick 数字,我会说我希望在位置 1、2、3、5、7 有刻度标签,结果将如下所示:

my preferred solution, but without specifying ticks manually

其他显示模式(仅限数字 2 和 5,或只是 10 的幂)不会改变。 有没有办法做到这一点?如果是这样,如何?如果需要,我不怕修补 Plotly,但现在我不知道从哪里开始寻找。

最佳答案

通常我通过将标签旋转 35-45 度来解决这个问题。这样它们就都在那里并且仍然可读。

https://plotly.com/javascript/reference/#layout-xaxis-tickangle

tickangle
Parent: layout.xaxis
Type: angle
Default: "auto"

Sets the angle of the tick labels with respect to the horizontal. For example, a `tickangle` of -90 draws the tick labels vertically.

Angled X labels

关于javascript - 在 Plotly Javascript 中跳过重叠的刻度标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70926979/

相关文章:

javascript - Angular - 返回 $modal promise 并拒绝它

javascript - 如何使部分在滚动时淡入淡出?

python - 在跟踪上禁用悬停信息,plotly

python - 如何在 plotly 中的子图上绘制矩形?

删除绘图轴值

Javascript 字符串未定义

javascript - dc.js 气泡图无法显示点

python - 基于变量值的自定义绘图标记

python - 如何为箱线图添加标签(pylab)

Python 子图为公共(public)轴标签留出空间