Chartjs v2 到 v3 的填充更改

Question

我正在尝试更新 Angular + Knockout 项目以使用 ChartJS 3.7.1 而不是 2.7.2。我的图表由多条线和区域组成。我正在尝试填充图表的一个区域以显示阈值。

代码在 Chartjs V2 中完美运行：

但更新到V3后，灰色区域不再显示：

我尝试将所有配置复制到 Charjs 官方文档网站的示例页面之一中，得到了相同的结果。在那里我找到了这张表，描述了所有数据集及其“填充”参数和“目标”的情况：

我的配置：

"options": {
        "responsive": true,
        "maintainAspectRatio": false,
        "plugins": {
          "title": {
            "display": true,
            "text": "Taylor TL(vc)"
          },
          "legend": {
            "display": true,
            "position": "bottom",
            "labels": {}
          },
          "tooltips": {
            "mode": "nearest",
            "intersect": true,
            "callbacks": {}
          },
          filler: {
              propagate: true
          }
        },
        "animation": {
          "duration": 0
        },
        "scales": {
          "xAxis": {
            "display": true,
            "title": {
              "display": true,
              "text": "Cutting speed (m/min)",
              "font": {
                "size": 14
              }
            },
            "grid": {
              "display": false
            },
            "type": "logarithmic",
            "min": 196.290296651142,
            "max": 574.377427855796,
            "ticks": {
              "font": {
                "size": 11
              }
            }
          },
          "y_left": {
            "type": "logarithmic",
            "id": "y_left",
            "display": true,
            "title": {
              "display": true,
              "text": "Estimated tool life (min)",
              "font": {
                "size": 14
              }
            },
            "grid": {
              "display": false
            },
            "position": "left",
            "min": 1,
            "max": 91.5862261413244,
            "ticks": {
              "font": {
                "size": 11
              }
            }
          },
          "y_right": {
            "type": "linear",
            "id": "y_right",
            "display": false,
            "title": {
              "display": true,
              "text": "",
              "font": {
                "size": 14
              }
            },
            "grid": {
              "display": false
            },
            "position": "right",
            "min": 0,
            "max": 1,
            "ticks": {
              "font": {
                "size": 11
              }
            }
          }
        }
      }

我的简化数据集：

[
          {
            "lineTension": 0,
            "fill": "",
            "label": "D0",
            "borderWidth": 4,
            "pointBorderWidth": 0,
            "pointRadius": 4,
            "pointHoverRadius": 4,
            "showLine": false,
            "type": "scatter",
            "borderColor": "rgb(0,100,170)",
            "backgroundColor": "rgb(0,100,170)",
            "yAxisID": "y_left",
            "data": [
              {
                "x": 370,
                "y": 14.7610711521017
              }
            ]
          },
          {
            "lineTension": 0,
            "fill": "",
            "label": "D1",
            "borderWidth": 3,
            "pointBorderWidth": 0,
            "pointRadius": 3,
            "pointHoverRadius": 3,
            "showLine": false,
            "type": "scatter",
            "borderColor": "rgb(0,100,170)",
            "backgroundColor": "rgb(0,100,170)",
            "yAxisID": "y_left",
            "data": [
              {
                "x": 370,
                "y": 14.7610711521017
              }
            ]
          },
          {
            "lineTension": 0,
            "fill": "",
            "label": "D2",
            "borderWidth": 0.5,
            "pointBorderWidth": 0,
            "pointRadius": 0,
            "pointHoverRadius": 0,
            "showLine": true,
            "type": "line",
            "borderDash": [
              10,
              4,
              2,
              4
            ],
            "borderColor": "rgb(0,100,170)",
            "backgroundColor": "rgb(0,100,170)",
            "yAxisID": "y_left",
            "data": [
              {
                "x": 370,
                "y": 1
              },
              {
                "x": 370,
                "y": 14.7610711521017
              }
            ]
          },
          {
            "lineTension": 0,
            "fill": "",
            "label": "D3",
            "borderWidth": 0.5,
            "pointBorderWidth": 0,
            "pointRadius": 0,
            "pointHoverRadius": 0,
            "showLine": true,
            "type": "line",
            "borderDash": [
              10,
              4,
              2,
              4
            ],
            "borderColor": "rgb(0,100,170)",
            "backgroundColor": "rgb(0,100,170)",
            "yAxisID": "y_left",
            "data": [
              {
                "x": 196.290296651142,
                "y": 14.7610711521017
              },
              {
                "x": 370,
                "y": 14.7610711521017
              }
            ]
          },
          {
            "lineTension": 0,
            "fill": "",
            "label": "D4",
            "borderWidth": 0.5,
            "pointBorderWidth": 0,
            "pointRadius": 0,
            "pointHoverRadius": 0,
            "showLine": true,
            "type": "line",
            "borderDash": [
              10,
              4,
              2,
              4
            ],
            "borderColor": "rgb(0,100,170)",
            "backgroundColor": "rgb(0,100,170)",
            "yAxisID": "y_left",
            "data": [
              {
                "x": 370,
                "y": 1
              },
              {
                "x": 370,
                "y": 14.7610711521017
              }
            ]
          },
          {
            "lineTension": 0,
            "fill": "",
            "label": "D5",
            "borderWidth": 0.5,
            "pointBorderWidth": 0,
            "pointRadius": 0,
            "pointHoverRadius": 0,
            "showLine": true,
            "type": "line",
            "borderDash": [
              10,
              10
            ],
            "borderColor": "rgb(255,0,0)",
            "backgroundColor": "rgb(255,0,0)",
            "yAxisID": "y_left",
            "data": [
              {
                "x": 196.290296651142,
                "y": 60.7410041596544
              },
              {
                "x": 245.362870813927,
                "y": 60.7410041596544
              }
            ]
          },
          {
            "lineTension": 0,
            "fill": "",
            "label": "D6",
            "borderWidth": 0.5,
            "pointBorderWidth": 0,
            "pointRadius": 0,
            "pointHoverRadius": 0,
            "showLine": true,
            "type": "line",
            "borderDash": [
              10,
              10
            ],
            "borderColor": "rgb(255,0,0)",
            "backgroundColor": "rgb(255,0,0)",
            "yAxisID": "y_left",
            "data": [
              {
                "x": 196.290296651142,
                "y": 7
              },
              {
                "x": 459.501942284637,
                "y": 7
              }
            ]
          },
          {
            "lineTension": 0,
            "fill": "",
            "label": "D7",
            "borderWidth": 0.5,
            "pointBorderWidth": 0,
            "pointRadius": 0,
            "pointHoverRadius": 0,
            "showLine": true,
            "type": "line",
            "borderDash": [
              10,
              10
            ],
            "borderColor": "rgb(255,0,0)",
            "backgroundColor": "rgb(255,0,0)",
            "yAxisID": "y_left",
            "data": [
              {
                "x": 459.501942284637,
                "y": 1
              },
              {
                "x": 459.501942284637,
                "y": 7
              }
            ]
          },
          {
            "lineTension": 0,
            "fill": "",
            "label": "D8",
            "borderWidth": 0.5,
            "pointBorderWidth": 0,
            "pointRadius": 0,
            "pointHoverRadius": 0,
            "showLine": true,
            "type": "line",
            "borderDash": [
              10,
              10
            ],
            "borderColor": "rgb(255,0,0)",
            "backgroundColor": "rgb(255,0,0)",
            "yAxisID": "y_left",
            "data": [
              {
                "x": 245.362870813927,
                "y": 1
              },
              {
                "x": 245.362870813927,
                "y": 60.7410041596544
              }
            ]
          },
          {
            "lineTension": 0,
            "fill": "",
            "label": "D9",
            "borderWidth": 2,
            "pointBorderWidth": 0,
            "pointRadius": 0,
            "pointHoverRadius": 0,
            "showLine": true,
            "type": "line",
            "borderColor": "rgb(0,100,170)",
            "backgroundColor": "rgb(0,100,170)",
            "yAxisID": "y_left",
            "data": [
              {
                "x": 245.362870813927,
                "y": 60.7410041596544
              },
              {
                "x": 459.501942284637,
                "y": 7
              }
            ]
          },
          {
            "lineTension": 0,
            "fill": "",
            "label": "D10",
            "borderWidth": 2,
            "pointBorderWidth": 0,
            "pointRadius": 0,
            "pointHoverRadius": 0,
            "showLine": true,
            "type": "line",
            "borderDash": [
              2,
              4
            ],
            "borderColor": "rgb(255,217,102)",
            "backgroundColor": "rgb(255,217,102)",
            "yAxisID": "y_left",
            "data": [
              {
                "x": 196.290296651142,
                "y": 15
              },
              {
                "x": 368.278921282049,
                "y": 15
              }
            ]
          },
          {
            "lineTension": 0,
            "fill": "",
            "label": "D11",
            "pointBorderWidth": 0,
            "pointRadius": 0,
            "pointHoverRadius": 0,
            "showLine": true,
            "type": "line",
            "borderColor": "rgba(0, 0, 0, 0)",
            "backgroundColor": "rgba(215,215,215,1)",
            "yAxisID": "y_left",
            "data": [
              {
                "x": 815.958124784052,
                "y": 91.5862261413244
              },
              {
                "x": 1028.44914644056,
                "y": 1
              }
            ]
          },
          {
            "lineTension": 0,
            "fill": "-1",
            "label": "D12",
            "pointBorderWidth": 0,
            "pointRadius": 0,
            "pointHoverRadius": 0,
            "showLine": true,
            "type": "line",
            "borderColor": "rgba(0, 0, 0, 0)",
            "backgroundColor": "rgba(215,215,215,1)",
            "yAxisID": "y_left",
            "data": [
              {
                "x": 574.377427855796,
                "y": 91.5862261413244
              },
              {
                "x": 574.377427855796,
                "y": 1
              }
            ]
          },
          {
            "lineTension": 0,
            "fill": "",
            "label": "D13",
            "pointBorderWidth": 0,
            "pointRadius": 0,
            "pointHoverRadius": 0,
            "showLine": true,
            "type": "line",
            "borderColor": "rgba(0, 0, 0, 0)",
            "backgroundColor": "rgba(215,215,215,1)",
            "yAxisID": "y_left",
            "data": [
              {
                "x": 84.3537803464742,
                "y": 91.5862261413244
              },
              {
                "x": 501.31702556873,
                "y": 1
              }
            ]
          },
          {
            "lineTension": 0,
            "fill": "-1",
            "label": "D14",
            "pointBorderWidth": 0,
            "pointRadius": 0,
            "pointHoverRadius": 0,
            "showLine": true,
            "type": "line",
            "borderColor": "rgba(0, 0, 0, 0)",
            "backgroundColor": "rgba(215,215,215,1)",
            "yAxisID": "y_left",
            "data": [
              {
                "x": 196.290296651142,
                "y": 91.5862261413244
              },
              {
                "x": 196.290296651142,
                "y": 1
              }
            ]
          }
        ]

如您所见，除了数据集 12 和 14 之外，所有数据集中的“fill”字段都设置为“”，这两个数据集的“fill”字段设置为“-1”。这应该分别填充从“原点”到第 11 行和第 13 行的区域，但它不起作用。

如果我尝试更改数据集 13 的填充字段，例如，从“”更改为 true，则该区域将按应有的方式显示为灰色。

知道我应该如何让它发挥作用吗？