我试图创建一个按数据集分组的条形图，而不是按chartjs 3中的标签分组的条形图，但我没有成功。在切换到在D3中构建之前，我想检查一下在ChartJS的范围内是否可以实现这一点。

这里有一个链接，指向我一直在使用条形图文档中的不同数据集结构和选项的小工具。我怀疑这超出了图表库的范围，或者在范围之内，但需要制作一些自定义组件-如果有人能指导我需要扩展哪些组件，我将不胜感激（例如，是否为自定义轴？或更多？）
https://jsfiddle.net/f34ucs76/2/

const data = {
  labels: [
    '2000','2010','2020',
    // 'Frogs','Monkeys','Squirrels','Bats'
  ],
  datasets: [
    {
      label: 'Frogs',
      data: [30.2,20.8,36.2],
      backgroundColor: 'red',
      //stack: 'Frogs',
    },
    {
      label: 'Monkeys',
      data: [16.3,13.0,22.3],
      backgroundColor: 'blue',
      //stack: 'Monkeys',
    },
    {
      label: 'Squirrels',
      data: [5.8,3.1,14.9],
      backgroundColor: 'cyan',
      //stack:'Squirrels',
    },
    {
      label: 'Bats',
      data: [0.1,3.6,2.6],
      backgroundColor: 'aquamarine',
      //stack:'Bats',
    },
  ],
}

const options = {
  maintainAspectRatio: false,
  responsive: true,
  interaction: {
    intersect: false,
    mode: 'index',
  },
  plugins: {
    title: {
      display: false,
    },
    subtitle: {
      display: true,
      align: 'start',
      text: ['Source: Animals Index, June 2022'],
      font: {
        size: 12,
        style: 'italic',
      },
      position: 'bottom',
      padding: {
        top: 20,
      },
    },
    legend: {
      display: true,
      position: 'bottom',
    },
    tooltip: {
      enabled: true,
    },
  },
  scales: {
    x: {
      grid: {
        display: false,
      },
    },
    y: {
      title: {
        display: true,
        text: 'Horsepower',
      },
    },
  },
}

const mychart = new Chart(
  document.getElementById('mychart'),
  {
    type: 'bar',
    data: data,
    options: options,
  }
);