Chart.js - 在折线图中为背景的特定部分着色

I have a line chart much like this one: http://www.chartjs.org/samples/latest/charts/line/basic.html

I would like to color the areas -100 < y < -40 and 40 < y < 100 a slight tint of red to indicate that point that fall in that area are in a danger zone.

This was a quick sketch using paint. Anything similar to this is welcome. How can I do this? I tried looking into the documentation but found nothing.

I currently have a workaround using a line chart stacked over a horizontal bar chart but it is far from ideal.

Thanks in advance!

解决方案

You can use annotation plugin and in particular Box annotations.

Here below there is an example with Scatter chart:

var randomScalingFactor = function() {
  return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
};
var randomColor = function(opacity) {
  return 'rgba(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + (opacity || '.3') + ')';
};
var data = {
  datasets: [{
    label: "My First dataset",
    data: [{
      x: randomScalingFactor(),
      y: randomScalingFactor(),
    }, {
      x: randomScalingFactor(),
      y: randomScalingFactor(),
    }, {
      x: randomScalingFactor(),
      y: randomScalingFactor(),
    }, {
      x: randomScalingFactor(),
      y: randomScalingFactor(),
    }, {
      x: randomScalingFactor(),
      y: randomScalingFactor(),
    }, {
      x: randomScalingFactor(),
      y: randomScalingFactor(),
    }, {
      x: randomScalingFactor(),
      y: randomScalingFactor(),
    }]
  }, {
    label: "My Second dataset",
    data: [{
      x: randomScalingFactor(),
      y: randomScalingFactor(),
    }, {
      x: randomScalingFactor(),
      y: randomScalingFactor(),
    }, {
      x: randomScalingFactor(),
      y: randomScalingFactor(),
    }, {
      x: randomScalingFactor(),
      y: randomScalingFactor(),
    }, {
      x: randomScalingFactor(),
      y: randomScalingFactor(),
    }, {
      x: randomScalingFactor(),
      y: randomScalingFactor(),
    }, {
      x: randomScalingFactor(),
      y: randomScalingFactor(),
    }]
  }]
};
data.datasets.forEach(function(dataset) {
  dataset.borderColor = randomColor(0.4);
  dataset.backgroundColor = randomColor(0.1);
  dataset.pointBorderColor = randomColor(0.7);
  dataset.pointBackgroundColor = randomColor(0.5);
  dataset.pointBorderWidth = 1;
});

var ctx = document.getElementById("canvas").getContext("2d");
window.myScatter = new Chart(ctx, {
	type: 'scatter',
  data: data,
  options: {
    scales: {
      xAxes: [{
        position: 'bottom',
        gridLines: {
          zeroLineColor: "rgba(0,255,0,1)"
        },
        scaleLabel: {
          display: true,
          labelString: 'x axis'
        },
      }],
      yAxes: [{
        position: 'left',
        gridLines: {
          zeroLineColor: "rgba(0,255,0,1)"
        },
        scaleLabel: {
          display: true,
          labelString: 'y axis'
        },
        ticks: {
        	min: -100,
          max: 100
        }
      }]
    },
    annotation: {
      drawTime: "afterDraw",
      events: ['dblclick'],
      annotations: [{
      	id: 'low-box',
        type: 'box',
        xScaleID: 'x-axis-1',
        yScaleID: 'y-axis-1',
        xMin: -100,
        xMax: 100,
        yMin: -100,
        yMax: -40,
        backgroundColor: 'rgba(255, 0, 0, 0.3)',
        //borderColor: 'rgb(255, 0, 0)',
        borderWidth: 1
      },{
      	id: 'hi-box',
        type: 'box',
        xScaleID: 'x-axis-1',
        yScaleID: 'y-axis-1',
        xMin: -100,
        xMax: 100,
        yMin: 100,
        yMax: 40,
        backgroundColor: 'rgba(255, 0, 0, 0.3)',
        //borderColor: 'rgb(255, 0, 0)',
        borderWidth: 1
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.min.js"></script>

<canvas id="canvas"></canvas>