billboard.js elease: viewBox 크기 조정!

오늘 새로운 v3.14 릴리스가 나왔습니다! 이번 릴리스에는 5가지 새로운 기능, 8가지 버그 수정 및 다양한 개선 사항이 포함되어 있습니다.

자세한 출시 정보는 출시 노트를 확인하세요.

• https://github.com/naver/billboard.js/releases/tag/3.14.0

새로운 소식

viewBox 크기 조정

새로운 크기 조정 옵션이 추가되었습니다. 기본 크기 조정은 컨테이너 크기 변경에 따라 크기가 조정됩니다.

새로운 resize.auto='viewBox' 옵션을 사용하면 계산 비용 없이 가로세로 비율을 유지하면서 차트 크기를 조정할 수 있습니다.

기본적으로 "viewBox" 속성 동작을 활용하며 실제로 수행하는 작업은 SVG 뷰포트를 확장하는 것입니다.

데모: https://naver.github.io/billboard.js/demo/#ChartOptions.resizeViewBox

사용 요구 사항이 일치하면 반드시 권장됩니다.

axis.evalTextSize

차트가 렌더링되도록 초기화되면 내부적으로 축 눈금 텍스트 크기를 계산하여 축 영역에 필요한 공간을 계산합니다.

일반적으로 이 과정은 전혀 고려할 필요가 없지만, 이 초기화 이후 축 눈금 텍스트 크기가 변경되는 경우 내부적으로 사용되는 눈금 텍스트 크기가 유효하지 않기 때문에 계산이 잘못 렌더링됩니다. 변경 후.

이 사용 사례를 개선하기 위해 축 눈금 크기 계산 방법을 선택할 수 있는 새로운 axis.evalTextSize 옵션을 제공합니다.

axis: {
    // 1: default, which will memoize evaluated axis text size
    evalTextSize: true,

    // 2: will evaluate the dimension of axis text size every time.
    evalTextSize: false,

    // 3: customize dimension evaluator
    evalTextSize: function(text) {
        ...
        return {width, height):
   }
}

상호 작용.onout

차트 영역에서 벗어나는 "기본" 동작은 현재 선택된 상태의 초점을 흐리게 합니다. 즉, 툴팁, 집중된 격자선 등의 표시 상태가 표시됩니다.

새 옵션을 사용하면 차트 영역에서 벗어나더라도 마지막 선택 상태를 유지하여 마지막 선택 상태를 유지할 수 있습니다.

기술적으로 이 옵션은 "onout" 이벤트에 대한 기본 상호 작용을 켜거나 끄는 것입니다.

interaction: {
    onout: false
}

강제 지연 렌더링

render.lazy 옵션은 컨테이너 요소가 표시될 때 렌더링되도록 합니다. 나중에 차트 요소를 초기화해야 하는 상황에 유용합니다.

컨테이너 요소가 표시되지 않으면 결정이 자동으로 설정됩니다. 그리고 숨겨진 상태에서 초기화하면 잘못 렌더링될 수 있고 일반적으로 의미가 없기 때문에 해당 조건에서 강제로 렌더링할 방법이 없습니다.

하지만 그렇게 할 수 있는 특별한 경우도 있습니다. 이러한 필요성을 충족시키기 위해 명시적인 render.lazy=false가 설정되면 컨테이너 요소 가시성 상태에 관계없이 초기화됩니다.

axis: {
    // 1: default, which will memoize evaluated axis text size
    evalTextSize: true,

    // 2: will evaluate the dimension of axis text size every time.
    evalTextSize: false,

    // 3: customize dimension evaluator
    evalTextSize: function(text) {
        ...
        return {width, height):
   }
}

범례 항목의 이벤트 콜백에 대한 가시성 상태

레전드 아이템의 이벤트 콜백 기능에 소소한 정보 개선이 추가되었습니다.

이벤트 콜백은 현재 범례 ID 값만 제공했습니다. 범례 가시성을 기반으로 일부 작업을 수행해야 하는 경우 직접 구현해야 했습니다.

어렵지는 않았지만 확실히 번거로운 작업이었습니다. 이를 제거하기 위해 이제 범례 항목의 "표시" 상태를 전달합니다.

이 인수를 기반으로 가시성 상태에 따라 작업을 실행할 수 있습니다.

interaction: {
    onout: false
}

폐쇄

이것이 이번 릴리스의 전부이며 아마도 올해 마지막 기능 구현일 것입니다.

항상 감사드리며, 향후 업데이트를 기대해주세요!

위 내용은 billboard.js elease: viewBox 크기 조정!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!