如何在Ant Design Charts中根据y轴数值条件填充图表背景色

实现方案 #

你可以通过Ant Design Charts内置的annotations注解配置，添加region类型的区间背景实现需求，以下是修改后的完整代码：

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,
    },
    // 区间背景配置
    annotations: [
      // 15-18 红色区间
      {
        type: 'region',
        start: { x: '0%', y: 15 },
        end: { x: '100%', y: 18 },
        style: {
          fill: '#ff4d4f',
          fillOpacity: 0.15,
        },
      },
      // 18-20 黄色区间
      {
        type: 'region',
        start: { x: '0%', y: 18 },
        end: { x: '100%', y: 20 },
        style: {
          fill: '#faad14',
          fillOpacity: 0.15,
        },
      },
      // 20-25 绿色区间
      {
        type: 'region',
        start: { x: '0%', y: 20 },
        end: { x: '100%', y: 25 },
        style: {
          fill: '#52c41a',
          fillOpacity: 0.15,
        },
      },
      // 更多区间按上述格式追加即可
    ]
  };
  return <Line {...config} />;
};

export default Graph;

核心配置说明 #

• 每个数值区间对应一个type: 'region'的注解项
• start和end的x值设为0%和100%，表示背景覆盖整个x轴范围
• start.y和end.y对应你要划分的y轴区间边界
• style.fill设置对应区间的填充色，fillOpacity调整透明度避免遮挡折线

内容的提问来源于stack exchange，提问作者Owenn