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

Question

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

我怎样才能做到这一点？

Answer 1

为了只显示某些点，您可以引用 CustomizedDotLineChart example在 Recharts 文档中。
可以看到CustomizedDot组件收到 payload prop，其中包含该点的数据项。通过添加属性，例如 visible (在您的示例中，您可以根据视口(viewport)宽度设置 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;
};