如何从 ReCharts 中的折线图中删除点？

Question

我只想渲染没有点的线。我正在使用：http://recharts.org/#/en-US/api/LineChart

这里是 JSFiddle：

http://jsfiddle.net/gw7v4br8/87/

const {LineChart, Line} = Recharts;
const data = [
      {name: 'Page A', uv: 4000, pv: 2400, amt: 2400},
      {name: 'Page B', uv: 3000, pv: 1398, amt: 2210},
      {name: 'Page C', uv: 2000, pv: 9800, amt: 2290},
      {name: 'Page D', uv: 2780, pv: 3908, amt: 2000},
      {name: 'Page E', uv: 1890, pv: 4800, amt: 2181},
      {name: 'Page F', uv: 2390, pv: 3800, amt: 2500},
      {name: 'Page G', uv: 3490, pv: 4300, amt: 2100},
];
const TinyLineChart = React.createClass({
    render () {
    return (
        <LineChart width={300} height={100} data={data}>
        <Line type='monotone' dataKey='pv' stroke='#8884d8' strokeWidth={1} />
      </LineChart>
    );
  }
})

ReactDOM.render(
  <TinyLineChart />,
  document.getElementById('container')
);

在他们的折线图 API 中，我没有看到点 API，这个库甚至可以实现吗？

http://recharts.org/#/en-US/api/LineChart

Answer 1

您需要为您正在渲染的<Line> 组件添加一个道具以隐藏“点”。

要添加的道具是 dot 道具，您应该为其提供值 false 以隐藏点。

所以你渲染<Line> 组件的那一行应该变成：

<Line type='monotone' dataKey='pv' stroke='#8884d8' strokeWidth={1} dot={false} />