有什么方法可以更改折线图(Recharts)中单击的线条的颜色?
Is there any way that I can change the color of only the clicked line in Line Chart (Recharts)?
我的折线图代码有问题。所以,我只想点击某条线来改变它的颜色,但图表中的所有线都会改变它们的笔触颜色。这是我的代码:
export default class LineChartPresentational extends React.Component {
constructor(props) {
super();
this.state = {
isclicked: true, }}
changeStrokeclick() {
this.setState({isclicked: !this.state.isclicked} )}
render() {
let strokecolor = this.state.isclicked ? "#9da0a5" : "#2d75ed"
return (
<div>
<div id="lclastdataref" style={{ textAlign: 'right' }}>
<span>Last Data Refresh: {linechartdf.date} </span>
</div>
<div className='line-charts'>
<div className="line-chart-wrapper " style={{ width: window.innerWidth / 2, height: window.innerHeight / 2, }}>
<ResponsiveContainer>
<LineChart
width={width} height={height} margin={{ top: 20, right: 20, bottom: 20, left: 20 }} data={linechartdata} id="Line-Chart">
<XAxis dataKey={xAxisColumn} />
<YAxis domain={['auto', 'auto']} />
<Tooltip cursor={false} />
{
linechartdata.map((entry, index) => (
<Line stroke={strokecolor} onClick={this.changeStrokeclick.bind(this)} name={linechartdata[index].dataKey} strokeWidth={lineThickness} dataKey={`value${index + 1}`} dot={false} className={`value${index + 1}`}/>
))
}
</LineChart>
</ResponsiveContainer>
</div>
</div>
</div>
); }
拜托,我真的需要你的帮助,因为你可以看到我的台词是使用循环创建的。谢谢!
首先,您需要将 isclicked
更改为 clickedLineID
并使其接受类似
的字符串
constructor(props) {
super();
this.state = {
clickedLineID: '', }}
onClick需要传递线路ID
<Tooltip cursor={false} />
{
linechartdata.map((entry, index) => (
<Line stroke={strokecolor} onClick={this.changeStrokeclick.bind(this, index)} name={linechartdata[index].dataKey} strokeWidth={lineThickness} dataKey={`value${index + 1}`} dot={false} className={`value${index + 1}`}/>
))
}
</LineChart>
然后处理来自点击行的数据
changeStrokeclick(data) {
console.log(data, 'see what is coming');
this.setState({clickedLineID: data} )
}
所以当前点击的行处于clickedLineID
状态
我们不再需要这段代码了,我也不喜欢把它放在里面 render()
let strokecolor = this.state.isclicked ? "#9da0a5" : "#2d75ed"
将工具提示中的描边线更改为
stroke={index === this.state.clickedLineID ? "#9da0a5" : "#2d75ed"}
所以最终代码会像这样
<Tooltip cursor={false} />
{
linechartdata.map((entry, index) => (
<Line stroke={index === this.state.clickedLineID ? "#9da0a5" : "#2d75ed"}
onClick={this.changeStrokeclick.bind(this, index)} name={linechartdata[index].dataKey} strokeWidth={lineThickness} dataKey={`value${index + 1}`} dot={false} className={`value${index + 1}`}/>
))
}
</LineChart>
更新:
如果再次单击以删除颜色,只需将 changeColor
更改为
changeColor = (data) =>{
console.log(data, 'check what we received from the button')
if(this.state.clickedItem === data){
this.setState({clickedItem: null})
}else{
this.setState({ clickedItem: data })
}
};
我的折线图代码有问题。所以,我只想点击某条线来改变它的颜色,但图表中的所有线都会改变它们的笔触颜色。这是我的代码:
export default class LineChartPresentational extends React.Component {
constructor(props) {
super();
this.state = {
isclicked: true, }}
changeStrokeclick() {
this.setState({isclicked: !this.state.isclicked} )}
render() {
let strokecolor = this.state.isclicked ? "#9da0a5" : "#2d75ed"
return (
<div>
<div id="lclastdataref" style={{ textAlign: 'right' }}>
<span>Last Data Refresh: {linechartdf.date} </span>
</div>
<div className='line-charts'>
<div className="line-chart-wrapper " style={{ width: window.innerWidth / 2, height: window.innerHeight / 2, }}>
<ResponsiveContainer>
<LineChart
width={width} height={height} margin={{ top: 20, right: 20, bottom: 20, left: 20 }} data={linechartdata} id="Line-Chart">
<XAxis dataKey={xAxisColumn} />
<YAxis domain={['auto', 'auto']} />
<Tooltip cursor={false} />
{
linechartdata.map((entry, index) => (
<Line stroke={strokecolor} onClick={this.changeStrokeclick.bind(this)} name={linechartdata[index].dataKey} strokeWidth={lineThickness} dataKey={`value${index + 1}`} dot={false} className={`value${index + 1}`}/>
))
}
</LineChart>
</ResponsiveContainer>
</div>
</div>
</div>
); }
拜托,我真的需要你的帮助,因为你可以看到我的台词是使用循环创建的。谢谢!
首先,您需要将 isclicked
更改为 clickedLineID
并使其接受类似
constructor(props) {
super();
this.state = {
clickedLineID: '', }}
onClick需要传递线路ID
<Tooltip cursor={false} />
{
linechartdata.map((entry, index) => (
<Line stroke={strokecolor} onClick={this.changeStrokeclick.bind(this, index)} name={linechartdata[index].dataKey} strokeWidth={lineThickness} dataKey={`value${index + 1}`} dot={false} className={`value${index + 1}`}/>
))
}
</LineChart>
然后处理来自点击行的数据
changeStrokeclick(data) {
console.log(data, 'see what is coming');
this.setState({clickedLineID: data} )
}
所以当前点击的行处于clickedLineID
状态
我们不再需要这段代码了,我也不喜欢把它放在里面 render()
let strokecolor = this.state.isclicked ? "#9da0a5" : "#2d75ed"
将工具提示中的描边线更改为
stroke={index === this.state.clickedLineID ? "#9da0a5" : "#2d75ed"}
所以最终代码会像这样
<Tooltip cursor={false} />
{
linechartdata.map((entry, index) => (
<Line stroke={index === this.state.clickedLineID ? "#9da0a5" : "#2d75ed"}
onClick={this.changeStrokeclick.bind(this, index)} name={linechartdata[index].dataKey} strokeWidth={lineThickness} dataKey={`value${index + 1}`} dot={false} className={`value${index + 1}`}/>
))
}
</LineChart>
更新:
如果再次单击以删除颜色,只需将 changeColor
更改为
changeColor = (data) =>{
console.log(data, 'check what we received from the button')
if(this.state.clickedItem === data){
this.setState({clickedItem: null})
}else{
this.setState({ clickedItem: data })
}
};