Question

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

f2

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

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"}

所以finall代码就像这样

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

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

1 个答案: