Javascript 是否有任何方法可以仅在折线图（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>
); }

导出默认类LineChartPresentational.Component{
建造师（道具）{
超级（）；
此.state={
isclicked:true，}
changeStrokeclick（）{
this.setState（{isclicked:！this.state.isclicked}）
render（）{
让strokecolor=this.state.isclicked？#9da0a5:“#2d75ed”
报税表（
上次数据刷新：{linechartdf.date}
{
linechartdata.map（（条目，索引）=>(
))
}
); }

---

我真的需要您的帮助，因为您可以看到我的行是使用循环创建的。谢谢！

首先，您需要将

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>

因此，当前单击的行处于

clickedLineID

状态

我们不再需要这段代码了，我也不想把它放在

render（）中

将工具提示中的笔划线更改为

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>

它成功了！非常感谢！：）尽管当我再次单击它时，它不会恢复到原始颜色。：（@Liam-看起来你的示例已从codesandbox中删除
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 = (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 })
    }
  };