typescript - Plotly 直方图 value %{x} 中的精度

我正在使用 Plotly 来显示带有悬停模板的直方图,该模板显示组中的 value。即使数据很大,我也需要将精度显示为 3 位,但是 Plotly 似乎在此之前舍入了 value ,因此在下面的示例中,hovertempalte 从“28200.000 - 28500.000”跳转到“28600.00 - 28800.00”并且value 28589.02 被第二个柱吸收,而它低于该范围的最小值。

是否有任何选项可以更改 %{x} value 上的精度?我尝试使用 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);

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

我最终通过从 xbin 中删除开始和结束 values 来解决我的问题的最大部分,将其从 Plotly 的逻辑中保留为默认值。显示的 values 仍然是四舍五入的,所以有一个跳跃,但范围总是覆盖所有点,所以在上面的例子中,范围固定为“28.1k - 28.4k”和“28.5k - 28.7k”。我认为开始和结束正在改变这一点并打破了一些 Plotly 舍入逻辑。

回答1

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

https://github.com/plotly/plotly.js/issues/5848 提出了一个类似的更简单的问题:为什么一个大小为 50 的 bin 会显示 0-4050-90 等范围,如 https://codepen.io/bklingenberg/pen/zYwdaOq?editors=0011

一位开发人员解释说:

这一切都是为了提高垃圾箱边缘的清晰度。准确地说,这里发生了两件事:

  • 我们检测到数据 values 都是整数,所以我们将 bin 边缘向下移动了 0.5 以确保 NO values 完全正确在 bin 边缘。如果放大,您可以看到这一点,垃圾箱实际上是 -0.5 -> 49.5、49.5 -> 99.5、99.5 -> 149.5 等
  • 但准确列出那些 values悬停标签会令人困惑:半整数 values 在整数数据标签中做了什么?所以我们再次查看数据并问:任何 value 最接近 bin 的左边缘或右边缘的是什么?在这种情况下,它距左侧边缘 0.5,距右侧 9.5,并且基于 50 的 bin 宽度,我们总是可以在末尾用零表示这些 values,所以这就是我们所做的 - 0-40, 50- 90、100-140 等。如果您添加一个 value,它只是稍微靠近垃圾箱的右边缘 - 比如说将 140 中的一个更改为 141 - 您会看到标签更改为 0-49、50- 99、100-149 等,因为我们不能再四舍五入到更大的数字。

我们真正不想做的是标签 50-100 和 100-150,因为那么我们将 value 放入正好 100 的 bin 是不明确的。但您可能会争辩说 bin 移位应该与范围缩小相匹配 - 即因为我们在这里将 bin 移动了 0.5,所以我们还应该精确地缩小我们报告的范围每边 0.5,到 50-99,或者如果我们想保持 50-90,我们应该将 bin 移动 5。

此解释也适用于您的情况:如果您尝试添加 value 28551,它恰好位于第 8 个 bin 的右边缘\第 9 个 bin 的左边缘(因为:25000 + (394.589 * 9) = 28551.301),您会注意到悬停的 bin 边缘变得非常精确 - https://stackblitz.com/edit/typescript-plotly-tro4jc?file=index.ts

因此,至少目前似乎没有什么可做的。

相似文章

go - golang 如何从字符串中查找表情符号?

我想查找表情符号是否存在并替换为字符串(HTMLunicode)。(符文到字符串)例如,这是句子“我喜欢你哈哈哈😀你好。”这就是结果。“我喜欢你哈哈哈😀你好。”表情符号和表情符号位置是随机的。我将...

最新文章