react-chartjs-2如何在折线图中设置多个背景水平

Question

我有一组数据，这些数据将显示在折线图中。 X轴为“天”，Y轴为0-200。

我希望图表的背景对于低于80的值是“黄色”，对于80-120之间的值是“绿色”，对于高于120则是“红色”。

我正在阅读文档，但是找不到类似的东西，我提供了一张图片。非常感谢。

Answer 1

您可以使用chartjs-plugin-annotation并绘制单独的彩色框，如下面的可运行代码段所示。

new Chart('chart', {
  type: 'line',
  data: {
    labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'],
    datasets: [{
      label: 'My Dataset',
      data: [60, 90, 130, 110, 100, 90, 80, 70, 80, 100],
      backgroundColor: 'rgba(0, 0, 0, 0.2)',
      borderColor: 'rgb(0, 0, 0)',
      borderWidth: 1,
      fill: false
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          min: 0,
          stepSize: 20
        },
        gridLines: {
          display: false
        }
      }],
      xAxes: [{
        gridLines: {
          display: false
        },
      }]
    },
    annotation: {
      annotations: [{
        type: 'box',
        yScaleID: 'y-axis-0',
        yMin: 120,
        yMax: 220,
        borderColor: 'rgba(255, 51, 51, 0.25)',
        borderWidth: 0,
        backgroundColor: 'rgba(255, 51, 51, 0.25)',
      },
      {
        type: 'box',
        yScaleID: 'y-axis-0',
        yMin: 80,
        yMax: 120,
        borderColor: 'rgba(0, 204, 0, 0.25)',
        borderWidth: 0,
        backgroundColor: 'rgba(0, 204, 0, 0.25)',
      },
      {
        type: 'box',
        yScaleID: 'y-axis-0',
        yMin: 0,
        yMax: 80,
        borderColor: 'rgba(255, 255, 0, 0.25)',
        borderWidth: 0,
        backgroundColor: 'rgba(255, 255, 0, 0.25)',
      }],
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.js"></script>
<canvas id="chart" height="80"></canvas>