reactjs - 如何在 ant-design 图表中使用 y 轴值条件填充背景颜色

Question

所以我目前正在使用 ant-design 图表来绘制从 Django 提取到 React 的数据。我想做的是根据 y 轴值将颜色填充到背景中。例如，我希望 15-18 的背景颜色为红色，18-20 为黄色，20-25 为绿色等等。这是我想要实现的屏幕截图：

到目前为止，我有一个非常简单的折线图：

import React from "react";
import { Line } from "@ant-design/charts";

const Graph = (props) => {
  var config = {
    data: props.data,
    padding: "auto",
    xField: "Hour",
    yField: "Measurement",
    yAxis: {
      minLimit: 15,
      maxLimit: 30,
      tickCount: 16,
    },
  };
  return <Line {...config} />;
};

export default Graph;

我曾尝试在线查找文章或指南，但找不到任何内容。任何帮助将不胜感激，非常感谢！

标签： reactjschartsant-design-pro