Blazor 차트 도구 설명
Blazor 차트에서 도구 설명은 바인딩된 데이터에 대한 세부 정보를 제공하고 최종 사용자가 데이터 요소 위로 마우스를 가져가면 팝업으로 렌더링됩니다. 도구 설명은 IgbCategoryChart
, IgbFinancialChart
및 IgbDataChart
컨트롤에서 지원됩니다.
Blazor Chart Tooltip Types
Blazor Chart는 ToolTipType
속성을 설정하여 도구 설명을 활성화하여 사용할 수 있는 세 가지 유형의 도구 설명을 제공합니다. 다음 예에서는 도구 설명 유형을 변경하는 데 사용할 수 있는 콤보 상자가 있는 기둥 차트 보여줍니다.
ToolTipType
속성은 구성 가능하며 다음 옵션 중 하나로 설정할 수 있습니다.
자산 가치 | 설명 |
---|---|
Default 툴팁 |
포인터를 항목 위에 놓으면 해당 항목에 대한 도구 설명이 표시됩니다. |
Data 툴팁 |
차트의 모든 계열에 대한 데이터 도구 설명을 표시합니다. |
Item 툴팁 |
포인터가 위치한 범주의 각 데이터 항목에 대한 도구 설명을 표시합니다. |
Category 툴팁 |
포인터가 위치한 범주의 모든 데이터 포인트에 대해 그룹화된 도구 설명을 표시합니다. |
Blazor Chart Tooltip Template
기본 제공 유형의 도구 설명이 요구 사항과 일치하지 않는 경우 고유한 도구 설명을 만들어 계열 제목, 데이터 값 및 축 값을 표시하고 스타일을 지정할 수 있습니다. 다음 섹션에서는 다양한 유형의 Blazor 차트에서 이 작업을 수행하는 방법을 보여줍니다.
Custom Tooltips in Category Chart
이 예제에서는 Blazor IgbCategoryChart
컨트롤의 모든 계열에 대한 사용자 지정 도구 설명을 만드는 방법을 보여줍니다. Blazor IgbFinancialChart
컨트롤의 사용자 지정 도구 설명에 동일한 논리를 적용할 수도 있습니다.
Custom Tooltips in Data Chart
이 예에서는 Blazor 데이터 차트 컨트롤의 각 계열에 대한 사용자 지정 도구 설명을 만드는 방법을 보여줍니다.
Additional Resources
다음 항목에서 관련 차트 기능에 대한 자세한 내용을 확인할 수 있습니다.
API References
IgbCategoryChart
및 IgbFinancialChart
구성 요소는 다음 API 속성을 공유합니다.
IgbDataChart
구성 요소에서는 다음 API 구성 요소 및 속성을 사용할 수 있습니다.
IgbDataToolTipLayer
IgbItemToolTipLayer
IgbCategoryToolTipLayer
ShowDefaultToolTip