下面的代码实现了Chart.js 2.* 中所需的功能（使用Chart.js 2.1.4，这是编写本文时的最新版本）：
https://jsfiddle.net/742zut83/22/
实作是以延伸折缐图类型和覆写draw函数为基础。新的draw函数会检查折缐图的data内是否存在下列项目，这些项目会定义要反白的y范围：

yHighlightRange : {
  begin: 6.5,
  end: 12.5
}

如果不存在，则调用原来的draw函数，如果存在，则在指定的y范围内绘制一个从左向右的矩形，绘制完矩形后调用原来的draw函数，完成折线图的绘制。
第一个实现没有绘制矩形。它有其他缺陷，它单独绘制所有像素线。就像电视扫描线（是的，我老了）。但旧代码在这里（如果你关心线条绘制）：
https://jsfiddle.net/742zut83/17/
当前代码如下：
第一个

您可以使用chartjs-plugin-annotation（chartjs的官方版本）中的方框注解。指定yMin和yMax，并保留xMin和xMax未定义，以便它填充整个x轴。
示例代码：
第一个

Chart.js v2.0.2不提供这种现成的功能。
不过，您可以扩充或建立新的型别建构函式。请参阅http://www.chartjs.org/docs/#advanced-usage-extending-existing-chart-types。
您应该能够实现一个由两条线包围的区域类型，或者创建一个类似于xnakos答案的阈值范围。

这段代码会很有帮助

var bgdata = {

        datasets: [
        {
        label: "Average Hourly Blood Glucose Reading", 
        fill: false,

       data: [
            {
                "y": 213,
                "x": 0,
                "backgroundColor": "rgba(29, 9, 158,0.2)",
            "label":"12:00 AM"

            },
            {
                "y": 199,
                "x": 1,
                "backgroundColor": "rgba(29, 9, 158,0.4)",
            "label":"1:00 AM"

            },
        {
                "y": 208,
                "x": 2,
                "backgroundColor": "rgba(29, 9, 158,0.6)",
            "label":"2:00 AM"

            }
        ]
            }
        ]
     };

最后我把@xnakos代码放在componentDidUpdate（）回调函数中。这样做的好处是你不需要像ctx.fillStyle = 'rgba（0，255，0，0.3）'那样设置高亮区域的不透明度来显示图形，也不需要覆盖@xnakos answer中的填充方法。

componentDidUpdate() {
  Chart.pluginService.register({
    beforeDraw: (chartInstance) => {
      var chart = chartInstance;
      // Get the object that determines the region to highlight.
      var yHighlightRange = chart.config.data.yHighlightRange;

      // If the object exists.
      if (yHighlightRange !== undefined) {
        var ctx = chart.chart.ctx;

        var yRangeBegin = yHighlightRange.begin;
        var yRangeEnd = yHighlightRange.end;

        var xaxis = chart.scales["x-axis"];
        var yaxis = chart.scales["y-axis"];

        var yRangeBeginPixel = yaxis.getPixelForValue(yRangeBegin);
        var yRangeEndPixel = yaxis.getPixelForValue(yRangeEnd);

        ctx.save();

        // The fill style of the rectangle we are about to fill.
        ctx.fillStyle = yHighlightRange.fillStyle;
        // Fill the rectangle that represents the highlight region. The parameters are the closest-to-starting-point pixel's x-coordinate,
        // the closest-to-starting-point pixel's y-coordinate, the width of the rectangle in pixels, and the height of the rectangle in pixels, respectively.
        ctx.fillRect(
          xaxis.left,
          Math.min(yRangeBeginPixel, yRangeEndPixel),
          xaxis.right - xaxis.left,
          Math.max(yRangeBeginPixel, yRangeEndPixel) -
            Math.min(yRangeBeginPixel, yRangeEndPixel)
        );

        ctx.restore();
      }
    },
  });
}

并且数据对象如下，

data = {
  labels: [],
  datasets: [...],
  yHighlightRange: {
    begin: 50,
    end: 100,
    fillStyle: "#7DD8D2",
  },
};

在Chart JS的最新版本中，您可以使用框注解。您可以在此处阅读有关它的更多信息：https://www.chartjs.org/chartjs-plugin-annotation/latest/guide/types/box.html