如何在Ant Design双轴折线图中为任意数据点添加标注线

实现方案 #

你需要的标注线可通过DualAxes组件的annotations配置项实现，该配置支持为指定数据点添加标记线、标注文本，以下是修改后的完整代码：

import React from "react";
import { DualAxes } from "@ant-design/charts";
import { Row, Typography, Col } from "antd";
import { Badge } from "antd";
import NumberFormat from "react-number-format";

const TimelineChart = ({ data }: { data: any[] }) => {
  const config: any = {
    xField: "date",
    yField: ["count", "value"],
    data: data,
    xAxis: {
      label: {
        style: {
          fill: "#6E759F",
        },
      },
    },
    yAxis: {
      count: {
        label: {
          style: {
            fill: "#6E759F",
          },
        },
      },
      value: {
        label: {
          style: {
            fill: "#03838B",
          },
        },
      },
    },
    geometryOptions: [
      {
        geometry: "line",
        color: ["#2F54EB", "#9254DE"],
        seriesField: "type",
      },
      {
        geometry: "line",
        color: "#2AABAB",
        seriesField: "type",
      },
    ],
    legend: false,
    // 新增标注配置
    annotations: [
      // 示例：给count系列10/09/2020的数据点加标注
      {
        type: 'dataMarker',
        // 绑定对应y轴，count对应第一个y轴，value对应第二个
        yAxis: 'count',
        // 标注位置：[x轴值, y轴值]
        position: ['10/09/2020', 2180],
        // 标注线配置
        line: {
          // 负数表示向坐标轴方向延伸，可自定义长度
          length: -30,
          style: {
            stroke: '#2F54EB',
            lineWidth: 2,
          },
        },
        // 数据点标记样式
        point: {
          style: {
            fill: '#2F54EB',
            r: 4,
          },
        },
        // 标注文本配置
        text: {
          content: '财务影响峰值：2180',
          style: {
            fill: '#2F54EB',
            fontSize: 12,
          },
          offsetY: -40,
        },
      },
      // 如需给value系列加标注，参考如下配置
      {
        type: 'dataMarker',
        yAxis: 'value',
        position: ['你要标注的日期', 对应value数值],
        line: {
          length: -30,
          style: {
            stroke: '#2AABAB',
            lineWidth: 2,
          },
        },
        point: {
          style: {
            fill: '#2AABAB',
            r: 4,
          },
        },
        text: {
          content: '自定义标注文本',
          style: {
            fill: '#2AABAB',
            fontSize: 12,
          },
          offsetY: -40,
        },
      }
    ]
  };
  return <DualAxes {...config} />;
};

export default TimelineChart;

补充说明 #

• 若需要动态生成多个标注，可遍历需要标注的数据点，生成对应的annotation对象推入annotations数组即可，无需手动写死配置
• 标注的线长、颜色、文本位置、样式都可根据UI需求自行调整对应属性
• 注意你原代码中config对象存在多余的闭合符号，调整时请修正语法错误

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