如何转换动态变化的dataKey以进行rechart

Question

我已经使用 rechart 创建了折线图。

我的代码是这样的

render(){
    const {items} = this.state;
    var data = [
      {name: 10,  FL: 2400, TM: 2400},
      {name: 20,  FL: 1398, TM: 2210},
      {name: 30,  FL: 9800, TM: 2290},
      {name: 40,  FL: 3908, TM: 2000},
      {name: 50,  FL: 4800, TM: 2181},
      {name: 60,  FL: 3800, TM: 2500},
      {name: 70,  FL: 4300, TM: 2100},
    ];

    return (
      <div>   
              <CustomLineChart data={data}/>
              
      </div>
  );

customLineChart.js

var renderLines = () => {
    var dynamic_array = ["FL", "TM", "LL"];
    var color = ["#8884d8", "#82ca9d", "orange", "pink"]
    var index =0;
    const lines = dynamic_array.map((value,index) => (
      <Line
        key={value}
        name={value}
        type="monotone"
        dataKey={value}
        stroke={color[index]} 
      />
      
    ));
    return lines;
  }

var modifyFormatter = (value, name, props) => {
    const nameJSX = <span><span style={{
        display: "inline-block",
        marginRight: "5px",
        borderRadius: "10px",
        width: "10px",
        height: "10px",
        backgroundColor: props.color
    }}></span>{name} : {value}</span>
    return [nameJSX];
}

function CustomLineChart(props) {
  
    return (
        <LineChart
            width={2000}
            height={300}
            data={props.data}
            margin={{
                top: 5, right: 30, left: 20, bottom: 5,
            }}>
            <CartesianGrid strokeDasharray="3 3" horizontal={false} vertical={false} />
            <XAxis dataKey={Object.keys(props.data[0])[0]} />
            <YAxis />
            <Tooltip formatter={modifyFormatter} />
            <Legend />
            {renderLines()}
        </LineChart>
      
    );

}

现在，我需要动态传递 {name: 10, FL: 2400, TM: 2400} 的值，例如 {name: 10, {category}: {value}} 其中 'category' 和 'value' 只是变量。简单地说，我需要将值分配为

data.push( {name: 80,{category} : {value}});

我能够为 {value} 传递值，但我仍然无法为 {category} 做同样的事情。有人可以帮忙吗？

Answer 1

data.push( {name: 80,[category] : {value}});

如何转换动态变化的dataKey以进行rechart

How to convert dynamically changing dataKey for rechart

javascript

recharts