Chart.js 横条的水平重叠，而不是整个图形

我被要求创建一个类似于上面的条形图，我想知道它是否可以在chart.js中实现？？我看过很多网站（如和），但想法是两个图形直接在后面-我需要能够设置块的位置（即，几乎像CSS中那样设置

margin left:-5px

），或者至少有一些重叠（或大约40%的重叠）。如果不是的话，我可能不得不在CSS中构建它，但是使用Chart JS会很好。

提供了一系列可以用于执行自定义代码的钩子。您可以使用

afterUpdate

钩子将各个数据集的条移动所需的像素数，如下所示：

afterUpdate: function(chart) {
  let datasets = chart.config.data.datasets;
  for (let iDs = 1; iDs < datasets.length; iDs++) {
    let dataset = datasets[iDs];
    for (var i = 0; i < dataset._meta[0].data.length; i++) {
      let model = dataset._meta[0].data[i]._model;
      model.x += iDs * offset;
      model.controlPointNextX += iDs * offset;
      model.controlPointPreviousX += iDs * offset;
    }
  }
}

我对你文章的标题和你添加的图片感到困惑。标题提到了一个水平条形图，但图像显示了一个垂直条形图。你能澄清一下吗？但是这些条是水平重叠的-是的，这是一个垂直的图形，虽然抱歉，我的不好。这就清楚了。谢谢你的回答——很好的回答！它按预期工作，但是我在同一页上有两个图形，我得到一个错误

无法读取未定义的属性“data”。我知道这两个图都是独立工作的，但放在一起似乎有错误？@Anthony:请为这一新问题发布一个新问题，可能会有一个代码示例再现所描述的错误。这将使解决这个问题变得更加容易。但我不确定这是否需要一个新问题？？