在ChartJs中获取多个背景框

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
      label: 'Dataset',
      data: [0, 10, 5, 2, 20, 30, 45],
      backgroundColor: 'rgba(0, 0, 0, 0.1)',
      borderColor: 'rgba(0, 0, 0, 0.5)',
      borderWidth: 1
    }]
  },
  options: {
    plugins: {
      annotations: {
        annotations: [{
          type: 'box',
          xMin: 'February',
          xMax: 'April',
          yMin: 0,
          yMax: 50,
          backgroundColor: 'rgba(255, 0, 0, 0.1)',
          borderColor: 'rgba(255, 0, 0, 0.5)',
          borderWidth: 1,
          onClick: function(e) {
            console.log('Clicked on background box');
          }
        }, {
          type: 'box',
          xMin: 'June',
          xMax: 'July',
          yMin: 30,
          yMax: 50,
          backgroundColor: 'rgba(0, 255, 0, 0.1)',
          borderColor: 'rgba(0, 255, 0, 0.5)',
          borderWidth: 1,
          onClick: function(e) {
            console.log('Clicked on background box');
          }
        }]
      }
    }
  }
});