5

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

我怎样才能做到这一点？

4

2 回答 2

3

为了只显示某些点，您可以参考 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;
};
于 2020-09-16T13:38:22.527 回答
-4

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

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

于 2017-04-20T02:35:08.790 回答