>source

다시 차트를 사용하여 막대 차트를 만들어야 합니다. 작업을 수행하려면 X축에 각 특정 막대에 연결된 레이블 및 버튼을 표시해야 합니다.

찾아보니 하나 이상의 X축을 사용할 수 있습니다.하지만 dataKey를 문자열 대신 구성 요소로 바꾸는 방법을 찾지 못하는 것 같습니다. 어떤 아이디어?

감사합니다!

  • 답변 # 1

    recharts API에서 정보를 찾았습니다. https://recharts.org/en-US/examples/CustomizedLabelLineChart

    요소를 반환하는 한 반응 구성 요소를 만드는 것이 가능하며 onClick 기능을 추가할 수 있으므로 버튼으로 작동할 수 있습니다. 예는 다음과 같습니다.

    class CustomizedAxisTick extends PureComponent {
      render() {
        const { x, y, stroke, payload }= this.props;
        return (
          <g transform={`translate(${x},${y})`} onClick={()=> console.log(payload.value)}>        <text x={0} y={0} dy={16} textAnchor="end" fill="#666" transform="rotate(-35)">          {payload.value}
            </text>      </g>    );
      }
    }
    

    다음과 같이 XAxis의 구성 요소를 호출하기만 하면 됩니다.

    <XAxis tick={<CustomizedTick />} />

  • 이전 javascript : 잘못된 결과 계산 고도 방위각에서 시간 각도
  • 다음 BASH 루프의 '/$d/$d.app'이 첫 번째 변수만 완성된 이유는 다음과 같습니다. '/예상폴더/$d.app'