툴팁 템플릿

igx-financial-chart 컨트롤은 각 시리즈 유형에 기본 툴 설명을 제공합니다. 기본 툴 설명에는 시리즈 제목, 데이터 값, 축 값 등의 특정 시리즈 항목과 관련된 모든 정보가 표시됩니다. 이들은 시리즈의 스타일에 맞게 디자인되어 있습니다. 기본 툴 설명이 충분하지 않은 경우 툴 설명 콘텐츠와 룩 앤드 필을 사용자 정의하여 사용자 툴 설명을 구성할 수 있습니다.

데모

툴 설명 콘텐츠는 다음의 코드와 같이 툴 설명 템플릿을 생성하여 사용자 정의화됩니다.

<ng-template let-series="series" let-item="item" #valueTooltip>
    <div>
        <span [style.color]="series.actualBrush">{{series.title}}</span>
        <span> stock opened on {{item.time | date}} with a value of ${{item.open | number}} and closed with a value of ${{item.close | number}}.</span>
    </div>
</ng-template>

<igx-financial-chart
    width="850px"
    height="600px"
    [dataSource]="data"
    [tooltipTemplate]="valueTooltip" >
</igx-financial-chart>
View page on GitHub