Chart.js-每个栏的注释

Question

我一直被赋予创建仪表盘的任务。大多数元素都很容易，但是其中一个是比较两组数据的图形。设计的外观看起来像这样

我使用Chart.js成功地获得了两个条形图，但是我试图为每个条形创建一些注释以创建绿色区域，但进展不顺利。我猜我使用插件错误或完全丢失了一些东西。每个注解似乎都覆盖了整个图

fiddle here

一些指针将不胜感激。非常感谢

var data = {
  labels: ["H2000", "H4000", "H4500"],
  datasets: [{
    label: "First",
    backgroundColor: 'rgba(191, 191, 191, 1)',
    borderWidth: 1,
    barPercentage: 1,
    categoryPercentage: 1,
    fill: true,
    data: [10, 20, 30],
    xAxisID: "bar-x-axis1",
  }, {
    label: "Second",
    backgroundColor: 'rgba(54, 162, 235, 1)',
    borderWidth: 1,
    barPercentage: 1,
    categoryPercentage: 1,
    fill: true, 
    data: [5, 30, 35],
    xAxisID: "bar-x-axis2",
  }]
};

var options = {
  responsive: true,
  scales: {
    xAxes: [{
      stacked: true,
      id: "bar-x-axis1",
      barThickness: 80,
    }, {
      display: false,
      stacked: true,
      id: "bar-x-axis2",
      barThickness: 100,
      type: 'category',
      categoryPercentage: 1,
      barPercentage: 1,
      gridLines: {
        offsetGridLines: true
      },
      offset: true
    }],
    yAxes: [{
      stacked: false,
      ticks: {
        beginAtZero: true
      },
    }]

  },
  annotation: {
     annotations: [{
        type: 'box',
        onlyForDataIndex: 0,
        datasetIndex: 0,
        linePadding: 0,
        id: 'bar-x-axis1',
        drawTime: 'beforeDatasetsDraw',
        yScaleID: 'y-axis-0',
        yMin: 25,
        yMax: 55,
        backgroundColor: 'rgba(0, 255, 0, 0.1)'
     }, {
        type: 'box',
        onlyForDataIndex: 1,
        datasetIndex: 1,
        linePadding: 0,
        id: 'bar-x-axis2',
        drawTime: 'beforeDatasetsDraw',
        yScaleID: 'y-axis-0',
        yMin: 5,
        yMax: 15,
        backgroundColor: 'rgba(0, 255, 0, 0.1)'
     }]
  }
};

var ctx = document.getElementById("myChart").getContext("2d");
var myBarChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: options
});