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