javascript - Plotly 直方图值 %{x} 的精度

我正在使用 Plotly 显示一个直方图，其中悬停模板显示来自组的值。我需要显示精确到三位数字，即使数据很大，然而 Plotly 似乎在此之前就对值进行了四舍五入，所以在下面的例子中，悬停模板从“28200.000 - 28500.000”跳到“28600.00 - 28800.00”，值 28589.02 被第二个柱吸收，而实际上它低于该范围的最小值。

是否有选项可以更改 %{x} 值的精度？我尝试使用 hoverformat: .3f，但它只是增加末尾的 0，所以并不能解决问题。

你可以在这里找到示例：https://stackblitz.com/edit/typescript-plotly-hfluqw?file=index.ts

const appDiv: HTMLElement = document.getElementById('app');
appDiv.innerHTML = `<div style="width: 100%; height: 100%" id="chart"></div>`;
import { newPlot } from 'plotly.js-dist';

const data = [
  {
    type: 'histogram',
    marker: { color: 'red' },
    mode: 'lines+markers',
    x: [25000, 28333.952, 28334.08, 28589.02, 28945.89],
    xbins: {
      start: 25000,
      end: 29340.479,
      size: 394.589,
    },
    hovertemplate: 'value: %{x}',
  },
];
const layout = {
  bargap: 0.1,
  hovermode: 'closest',
  xaxis: {
    hoverformat: ',.3f',
  },
};

newPlot('chart', data, layout);

编辑：修复范围间隙内的点

我终于通过从 xbins 中移除起始值和结束值解决了我问题中最大的部分，让它使用 Plotly 的默认逻辑。显示的值仍然是四舍五入的，所以会有跳跃，但范围总是覆盖所有点，所以在上面的例子中，范围被固定为“28.1k - 28.4k”和“28.5k - 28.7k”。我认为起始值和结束值导致了这个偏移，破坏了 Plotly 的某些四舍五入逻辑。

答案＃1

不幸的是，目前这似乎是预期的行为，这就是 Plotly 内部 bin 范围“收缩”的工作方式。

有一个开放的 GitHub 问题提出了一个类似、更简单的问题：为什么一个大小为 50 的区间显示 0-40、50-90 等范围，如这个实时演示所示？

一位开发者解释道：

这一切都是为了在箱子边缘获得更清晰的效果。准确来说，这里发生的是两件事：
我们检测到数据值都是整数，所以我们将箱子边缘下移了0.5，以确保没有值恰好处于箱子边缘。如果放大查看，你会看到箱子实际上是 -0.5 -> 49.5、49.5 -> 99.5、99.5 -> 149.5 等
但是在悬停标签中精确列出这些数值会令人困惑：半整数值出现在整数数据的标签中是什么意思？因此我们重新查看数据并提出问题：有哪个值最接近某个区间的左边缘或右边缘？在这种情况下，左边缘最接近的是0.5，右边缘最接近的是9.5，根据区间宽度50，我们总是可以用末尾为零的值来表示这些数值，所以我们就这样做——0-40、50-90、100-140 等。如果你添加一个稍微接近区间右边缘的值，比如把一个140改为141，你会看到标签变成0-49、50-99、100-149 等，因为我们无法再向更大的数字取整。
我们真正不想做的是设置标签为50-100和100-150，因为这样的话，对于值恰好为100的情况，我们将其放入哪个区间是不明确的。但你或许可以争论说，区间的偏移应该与范围的缩小相匹配——即因为我们这里正好将区间偏移了0.5，我们也应该在报告的范围的每一侧同样缩小0.5，变成50-99，或者如果我们想保持50-90，我们应该将区间偏移5。

这个解释同样适用于你的情况：如果你尝试添加值 28551，它正好位于第 8 个箱子的右边缘\第 9 个箱子的左边缘（因为：25000 + (394.589 * 9)=28551.301），你会注意到悬停时的箱子边缘变得非常精确——如你在这里看到的那样。

看来对此似乎没什么可做的，至少目前如此。