如何使用 Plotly JS 根据预先计算的数据绘制直方图

Question

问题

例如，我有这样的数据，其中 x 是 year 而 y 是 count:

{
  "x": [1950, 2000, 2010],
  "y": [1, 1, 5]
}

这意味着 count 在 1950-2000 之间是 1，在 2000-2010 之间也是 1，在 2010-现在之间是 5。

我想为这个数据做一个直方图。我觉得我已经非常接近解决方案了，但不知何故它仍然不起作用。

我试过的

我创建了一个条形图并将 bargap 设置为 0。此外，每个条形的宽度是年份的差异。例如，第一个条的宽度是 2000 - 1950 = 50。这是计算条宽的函数：

calculateBarWidth (data: PlotData) {
  // The width of each bar is the difference between 2 consecutive years
  const diff: number[] = []

  for (let i = 1; i < data.x.length; i++) {
    diff.push(data.x[i] - data.x[i - 1])
  }

  // Last diff
  diff.push(10)

  return diff
}

我也知道默认情况下，Plotly 将 xtick 放在栏的中间。因此，对于 1950 年的第一根柱线，它看起来像这样，其中 1950 年位于红线处：

由于这是一个直方图，我希望年份位于柱状图的开头，所以我将柱状图偏移量设置为其宽度的一半。

把所有东西放在一起，这是我的绘图功能：

createPlot (divElement: HTMLElement, data: PlotData) {
  const barWidth = this.calculateBarWidth(data)
  const barOffset = barWidth.map(value => value / 2)

  const plotData: any = [{
    x: data.x,
    y: data.y,
    type: 'bar',
    width: barWidth,
    offset: barOffset,
    hovertext: this.createHoverText(data),
    hoverinfo: 'text'
  }]

  const config = {
    responsive: false,
    displaylogo: false,
    displayModeBar: false
  }

  const layout = {
    title: {
      text: this.title,
      font: {
        size: 14
      }
    },
    xaxis: {
      title: {
        text: this.xlabel,
        font: {
          size: 14
        }
      },
      tickfont: {
        size: 12
      }
    },
    yaxis: {
      title: {
        text: this.ylabel,
        font: {
          size: 14
        }
      },
      tickfont: {
        size: 12
      }
    },
    bargap: 0,
    margin: {
      l: 50,
      r: 20,
      b: 40,
      t: 40
    }
  }

  Plotly.react(divElement, plotData, layout, config)
}

然而，剧情是这样的：

不知何故，第一个条偏移太多以至于与其他两个重叠，而另外两个偏移不够。

如果我完全删除偏移量，那么情节看起来像这样，这是完全错误的。

问题

我做错了什么？有没有更好的方法？

Answer 1

好的，我在随机尝试后无意中找到了解决方案。

似乎 xticks 总是在栏的中间，因为默认应用 offset = -barWidth / 2。

因此，只需将 offset 设置为 0 即可解决问题。

如何使用 Plotly JS 根据预先计算的数据绘制直方图

How to plot a histogram with Plotly JS from pre-computed data

typescript

plot

nuxt.js

plotly.js

问题

我试过的

问题