如何从 ReCharts 的折线图中删除点?
How to remove points from line chart in ReCharts?
我只想渲染没有点的线。我正在使用: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,这个库甚至可以做到这一点吗?
您需要向正在渲染的 <Line>
组件添加一个道具,以便隐藏 "dots"。
要添加的道具是 dot
道具,您应该为其提供值 false
以隐藏点。
所以渲染 <Line>
组件的那一行应该变成:
<Line type='monotone' dataKey='pv' stroke='#8884d8' strokeWidth={1} dot={false} />
我只想渲染没有点的线。我正在使用: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,这个库甚至可以做到这一点吗?
您需要向正在渲染的 <Line>
组件添加一个道具,以便隐藏 "dots"。
要添加的道具是 dot
道具,您应该为其提供值 false
以隐藏点。
所以渲染 <Line>
组件的那一行应该变成:
<Line type='monotone' dataKey='pv' stroke='#8884d8' strokeWidth={1} dot={false} />