설정된 Y축 범위를 다시 차트화합니다.

설정된 Y축 범위를 다시 차트화합니다.

http://recharts.org/을 사용하여 Y축 범위를 설정하는 방법을 알 수 없습니다.

Y축이 현재 60이 아닌 범위 내에 100을 표시하도록 합니다.

이 경우 Belive 코드 예는 필요하지 않거나 목적을 충족할 필요가 없습니다.

YAxis 구성 요소에서 도메인 값을 0 ~ 100(또는 원하는 대로)으로 설정합니다.

 <YAxis type="number" domain={[0, 20000]}/>

이 바이올린 링크를 확인합니다.

도메인 기본값: [0, '자동']

축이 숫자 축일 때 축의 도메인을 지정합니다.도메인 길이는 2여야 하며 도메인 값을 검증합니다.또한 배열 내의 각 요소는 숫자, 'auto', 'dataMin', 'dataMax', 'dataMin-20', 'dataMax+100' 등의 문자열 또는 단일 인수를 받아들여 숫자를 반환하는 함수일 수 있습니다.도메인의 요소 중 하나가 auto로 설정되어 있는 경우, 이해 가능한 스케일 틱이 계산되어 틱에 의해 축의 최종 도메인이 생성된다.

형식:

<YAxis type="number" domain={['dataMin', 'dataMax']} />
<YAxis type="number" domain={[0, 'dataMax']} />
<YAxis type="number" domain={['auto', 'auto']} />
<YAxis type="number" domain={[0, 'dataMax + 1000']} />
<YAxis type="number" domain={['dataMin - 100', 'dataMax + 100']} />
<YAxis type="number" domain={[dataMin => (0 - Math.abs(dataMin)), dataMax => (dataMax * 2)]} />

차트의 값이 사용자 정의 도메인 범위를 초과하면 도메인 경계 집합이 무시됩니다.음수 값이 양수 값처럼 쌓이는 커스텀 쉐이프를 사용하기 때문에 이 문제가 발생했습니다(다른 색상은 다릅니다.의 지정domain={[0, 'dataMax + 1000']}y축이 아직 음수를 나타냈기 때문에 설정될 때까지 작동하지 않았습니다.allowDataOverflow={true}

<YAxis domain={[0, 'dataMax + 1000']} allowDataOverflow={true} />

그리고 한 가지 더

"type"은 "number", "category"의 2가지 유형 중 하나입니다.

도메인은 축의 숫자 유형에만 적용됩니다.

도메인이 적용되지 않으면 축 유형을 확인하십시오.

문제가 해결되지 않으면 축 값이 문자열 유형이기 때문일 수 있습니다.

값을 수동으로 타이프캐스트하여 해결할 수 있는 번호를 지정합니다.

다중선 그래프를 그리고 계산에 사용자 정의 YAx가 있다고 가정합니다.

따라서 커스텀 data Key out of data를 정의할 수 있습니다.

   <YAxis type="number" 
           dataKey={(v)=>parseInt(v.someValue)}
           domain={[0, 'dataMax+100']} />

많은 실험 끝에 다음과 같이 YAxis 최대값을 계산하는 커스텀 코드를 작성했습니다.

const [yAxisMax, setYAxisMax] = useState(100);

.....
// json fetch here, and stored in 'data'
let currentMonthMax = Math.max(...data.map((o) => o.CurrentMonth)); // if the array has a custom object that contains 'CurrentMonth'
setYAxisMax(max * 1.1); // increase yaxis by 1.1%

.....

<YAxis type="number" domain={[0, yAxisMax]} />

언급URL : https://stackoverflow.com/questions/50078787/recharts-set-y-axis-range