Ant Design Chart 阻止移动网络上的页面滚动

Question

在 React 应用程序上，我有一个包含 6-7 个 ant design 绘图图表的页面，该页面上还有其他内容。现在antd图表的问题是当尝试在手机（Android）上触摸滚动时。触摸图表会阻止页面滚动，就像当拇指放在任何这些图表上时页面不会滚动一样。仅显示图表的工具提示。我该如何解决这个问题？ @ant-design/plots": "^2.1.13" 所使用的版本。也通过升级或降级版本尝试了不同的版本，但结果是相同的。这里添加了一个示例片段。

import { DualAxes } from '@ant-design/plots';

export const EarningsPerShare = () => {
  const formattedData = [
    {
      value: 3.64,
      year: 2023,
      type: 'EPS',
    },
    {
      value: 1.85,
      year: 2022,
      type: 'EPS',
    },
    {
      value: 2.14,
      year: 2021,
      type: 'EPS',
    },
    {
      value: 2.14,
      year: 2021,
      type: 'EPS',
    },
    {
      value: 3.19,
      year: 2020,
      type: 'EPS',
    },
    {
      value: 3.19,
      year: 2020,
      type: 'EPS',
    },
    {
      value: 4,
      year: 2019,
      type: 'EPS',
    },
    {
      value: 4,
      year: 2019,
      type: 'EPS',
    },
    {
      value: 4.01,
      year: 2018,
      type: 'EPS',
    },
    {
      value: 3.22,
      year: 2017,
      type: 'EPS',
    },
  ];

  const config = {
    xField: 'year',
    legend: false,
    tooltip: {
      items: [
        {
          channel: 'y',
          name: 'EPS',
          valueFormatter: (d: any) => {
            return `${d}`;
          },
        },
      ],
    },
    scrollbar: {
      x: {
        style: {
          trackSize: 20,
          isRound: true,
        },
      },
      y: false,
    },
    children: [
      {
        data: formattedData,
        type: 'interval',
        yField: 'value',
        stack: true,
        colorField: 'type',
        style: { maxWidth: 20, minWidth: 20 },
        interaction: { elementHighlightByColor: { background: true } },
        scale: {
          color: {
            relations: [['EPS', '#5b9bd5']],
          },
        },
      },
    ],
  };

  if (!formattedData || formattedData?.length <= 0) {
    return <span></span>;
  }

  return (
    <div className="flex flex-col w-full px-3 mt-2">
      <div className="h-[300px]">
        <DualAxes {...config} />
      </div>
    </div>
  );
};

Answer 1

您可以尝试 css 方法，通过向图表中添加一个容器，如下所示

  return (
  <div className="flex flex-col w-full px-3 mt-2">
    <div className="h-[300px] chart-container">
      <DualAxes {...config} />
    </div>
  </div>
);

.chart-container {
  touch-action: pan-y;
}

触摸动作：pan-y；图表容器上的 css 属性将有助于控制触摸交互的行为。