当 ChartJS 中没有重叠数据时，以全角渲染来自多个数据集的条形

如何解决当 ChartJS 中没有重叠数据时，以全角渲染来自多个数据集的条形

里面的例子。作为参考，我使用的是最新版本的 ChartJS (3.2.1) 和最新版本的 react-chartjs-2 (3.0.3)。

我想知道如何在给定多个不同数据集的情况下以特定方式显示条形图。我希望图表上的条形以其标准宽度呈现，同时还允许在必要时并排重叠。

当您使用一个数据集时，ChartJS 将以我的“理想”方式处理这个问题，该数据集可能有两个值落在同一个 X 轴坐标上，但我似乎无法在使用多个数据集时模仿这种行为。

似乎每当两个数据集共享一个轴时，条形宽度要么调整以容纳两组数据，即使它们不占据相同的空间，要么在它们应该占据相同的空间时彼此堆叠空间。我的目标是只在必要时让条形“缩小”它们的宽度，否则保持它们的全宽。

以下是我希望在多个数据集上看到的示例（这是 ChartJS 在设置了 barThickness: "flex" 的一个数据集时处理渲染的方式）：

在中间，您会注意到条形宽度自动调整为彼此腾出空间。

以下是当我使用两个没有任何重叠点的数据集时得到的示例（barThickness: "flex" 都设置在两个数据集上）：

最后，这是一个在使用两个数据集时有一些重叠点的示例：

到目前为止，我什至发现解决此问题的唯一方法是创建多个 x 轴，一个用于一个数据集，一个用于另一个，一个用于重叠。然后，通过操纵我的数据结构，为每个轴创建数据集，其中包含与所需条形宽度完全对应的数据点。

这当然是一个解决方案，但我正在处理一个生产代码库、数千行数据和几个额外的数据集（所有这些都有不同的状态、可见性条件和规则）。像这样一起管理所有这些变得几乎不可能，更不用说以可维护的方式了。我已经浏览了绝大多数 StackOverflow 问题和 ChartJS 文档，试图找到一个更简洁的解决方案，但到目前为止还很短，希望得到您的帮助。

以下代码的简化版本。我已经包含了一些未使用的点点滴滴（大部分被注释掉了），只是为了展示我迄今为止尝试过的东西：

var ctx1 = document.getElementById("canvas1").getContext("2d");
var ctx2 = document.getElementById("canvas2").getContext("2d");
var ctx3 = document.getElementById("canvas3").getContext("2d");

function getBackgroundColor(data) {
  const bar = data.dataset.data[data.dataIndex];
  return bar.projection ? "green" : "black";
}
const dataset1Labels = ['Mar 2021','Apr 2021','May 2021','Jun 2021','Jul 2021','Aug 2021']
const dataset2Labels = ['Jan 2020','Feb 2020','Mar 2020','Apr 2020',...dataset1Labels]
const dataset3Labels = ['Jan 2020','May 2020','Jun 2020','Jul 2020','Aug 2020',...dataset1Labels]

const dataset1 = [
  { x: "Mar 2021",y: 1,projection: false },{ x: "Apr 2021",y: 4,{ x: "May 2021",y: 6,y: 9,projection: true },{ x: "Jun 2021",y: 11,{ x: "Jul 2021",y: 13,{ x: "Aug 2021",y: 16,]
const dataset2 = [
  { x: "Jan 2020",y: 1 },{ x: "Feb 2020",y: 4 },{ x: "Mar 2020",y: 6 },{ x: "Apr 2020",y: 8 },{ x: "Mar 2021",]

const dataset3 = [
  { x: "Jan 2020",{ x: "May 2020",y: 10 },{ x: "Jun 2020",y: 12 },{ x: "Jul 2020",{ x: "Aug 2020",y: 16 },]

var myChart = new Chart(ctx1,{
  type: 'bar',data: {
    labels: dataset1Labels,datasets: [{
      label: "2 data types,distinguished by color",data: dataset1,backgroundColor: getBackgroundColor,barThickness: "flex",}]
  },options: {
    plugins: {
      title: {
        display: true,text: '1 dataset. Can Overlap. Full width bars.'
      },legend: {
        position: "bottom",},scales: {
      x: {
        id: "dates",offset: true,}
  }
});

var myChart2 = new Chart(ctx2,data: {
    labels: dataset2Labels,datasets: [
    {
      label: "prevIoUs year",data: dataset2,backgroundColor: "blue",xAxisID: "dates",{
      label: "current year",backgroundColor: "green",]},text: '2 datasets. Cannot Overlap. Full width bars.'
      },scales: {
      x: {
        id: "dates2",display: false,stacked: false,bounds: "ticks",grid: {
          offset: true,}
  }
});

var myChart3 = new Chart(ctx3,data: {
    labels: dataset3Labels,data: dataset3,// group: false,// barThickness: "flex",// categoryPercentage: 1,// barPercentage: 1,text: '2 datasets. Can overlap. Half-width bars.'
      },scales: {
      x: {
        id: "dates3",}
  }
});

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.2.1/dist/chart.min.js"></script>
<h2>Chart #1</h2>
<canvas id="canvas1"></canvas>
<h2>Chart #2</h2>
<p>Note that march and April 2021 both have data from both datasets,but only one dataset is visible</p>
<canvas id="canvas2"></canvas>
<h2>Chart #3</h2>
<canvas id="canvas3"></canvas>