仅针对某些数据点重新绘制 LineChart 点

Question

我想使用 Recharts 的 LineChart 来显示最多 200 个点的数据集。但是，我只想在小屏幕上显示其中 5 个数据点的 dots/tooltip/activeDot，因为 200 个点在智能手机上不再可点击。

我怎样才能做到这一点？

Answer 1

为了仅显示某些点，您可以参考Recharts文档中的CustomizedDotLineChart示例。

您可以看到该CustomizedDot组件收到一个payloadprop，其中包含此时的数据项。通过添加诸如visible（在您的示例中，您可以visible根据视口宽度设置值，在调整大小事件时更新它）的属性，您可以执行以下操作：

const CustomizedDot = (props) => {
  const { cx, cy, stroke, payload, value } = props;

  if (payload.visible) {
    return (
      <svg x={cx - 4} y={cy - 4} width={8} height={8} fill="white">
        <g transform="translate(4 4)">
          <circle r="4" fill="black" />
          <circle r="2" fill="white" />
        </g>
      </svg>
    );
  }

  return null;
};

Answer 2

基于Recharts API，我相信您要查找的参数是参数payload，它是组件的一部分Tooltip。传递一个仅包含您希望可单击的数据点的对象。

参考链接： http: //recharts.org/#/en-US/api/Tooltip