如何在ReCharts中移除折线图上的数据点？

我目前在使用Recharts的LineChart组件，想要实现只显示折线、隐藏数据点的效果，但在LineChart的API文档里没找到相关配置项。想问问这个需求能不能用这个库实现？

我的代码如下：

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')
 );

当然可以实现！你找错地方啦——控制数据点显示的配置项不在LineChart组件上，而是在它内部的Line组件里。

你只需要给Line组件添加两个属性就能搞定：

• dot={false}：这个属性会隐藏折线图上的常规数据点
• activeDot={false}：如果不需要鼠标 hover 时显示高亮数据点，也可以把这个设为false

修改后的代码示例：

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} dot={false} activeDot={false} />
 </LineChart>
 );
 }
})
ReactDOM.render(
 <TinyLineChart />,
 document.getElementById('container')
 );

简单补充说明：

• dot属性默认值为true，控制常规状态下数据点的显示与否
• activeDot属性默认值也为true，控制鼠标 hover 交互时数据点的显示与否

如果只是想隐藏常规数据点，保留hover时的高亮效果，只设置dot={false}就足够啦。

内容的提问来源于stack exchange，提问作者Leon Gaban