有什么方法可以更改折线图（Recharts）中单击的线条的颜色吗？

Question

我的折线图代码有问题。所以，我只想点击某条线来改变它的颜色，但是图表中的所有线都会改变它们的笔触颜色。这是我的代码：

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

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

Answer 1

首先，您需要将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 })
    }
  };