Web Components 차트 툴팁

Web Components 차트에서 도구 설명은 바인딩된 데이터에 대한 세부 정보를 제공하며 최종 사용자가 데이터 요소 위로 마우스를 가져가면 팝업으로 렌더링됩니다. 도구 설명은 , IgcFinancialChartComponent 및 IgcDataChartComponent 컨트롤에서 IgcCategoryChartComponent 지원됩니다.

Web Components 차트 도구 설명 유형

Web Components 차트는 속성을 설정하여 toolTipType 도구 설명을 사용하도록 설정할 수 있는 세 가지 유형의 도구 설명을 제공합니다. 다음 예제에서는 도구 설명 유형을 변경하는 데 사용할 수 있는 콤보 상자가 있는 기둥 차트 보여 줍니다.

EXAMPLE

DATA

TS

HTML

CSS

export class HighestGrossingMoviesItem {
    public constructor(init: Partial<HighestGrossingMoviesItem>) {
        Object.assign(this, init);
    }

    public franchise: string;
    public totalRevenue: number;
    public highestGrossing: number;

}
export class HighestGrossingMovies extends Array<HighestGrossingMoviesItem> {
    public constructor(items: Array<HighestGrossingMoviesItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new HighestGrossingMoviesItem(
                {
                    franchise: `Marvel Universe`,
                    totalRevenue: 22.55,
                    highestGrossing: 2.8
                }),
                new HighestGrossingMoviesItem(
                {
                    franchise: `Star Wars`,
                    totalRevenue: 10.32,
                    highestGrossing: 2.07
                }),
                new HighestGrossingMoviesItem(
                {
                    franchise: `Harry Potter`,
                    totalRevenue: 9.19,
                    highestGrossing: 1.34
                }),
                new HighestGrossingMoviesItem(
                {
                    franchise: `Avengers`,
                    totalRevenue: 7.76,
                    highestGrossing: 2.8
                }),
                new HighestGrossingMoviesItem(
                {
                    franchise: `Spider Man`,
                    totalRevenue: 7.22,
                    highestGrossing: 1.28
                }),
                new HighestGrossingMoviesItem(
                {
                    franchise: `James Bond`,
                    totalRevenue: 7.12,
                    highestGrossing: 1.11
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsコピー

import { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import { IgcLegendModule, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import { defineAllComponents } from 'igniteui-webcomponents';
import { ModuleManager } from 'igniteui-webcomponents-core';

defineAllComponents();

import "./index.css";

ModuleManager.register(
    IgcPropertyEditorPanelModule,
    IgcLegendModule,
    IgcCategoryChartModule
);

export class Sample {

    private propertyEditor: IgcPropertyEditorPanelComponent
    private toolTipTypeEditor: IgcPropertyEditorPropertyDescriptionComponent
    private legend: IgcLegendComponent
    private chart: IgcCategoryChartComponent
    private _bind: () => void;

    constructor() {
        var propertyEditor = this.propertyEditor = document.getElementById('PropertyEditor') as IgcPropertyEditorPanelComponent;
        var toolTipTypeEditor = this.toolTipTypeEditor = document.getElementById('ToolTipTypeEditor') as IgcPropertyEditorPropertyDescriptionComponent;
        var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
        var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;

        this._bind = () => {
            propertyEditor.componentRenderer = this.renderer;
            propertyEditor.target = this.chart;
            chart.legend = this.legend;
            chart.dataSource = this.highestGrossingMovies;
        }
        this._bind();
    }

    private _highestGrossingMovies: HighestGrossingMovies = null;
    public get highestGrossingMovies(): HighestGrossingMovies {
        if (this._highestGrossingMovies == null)
        {
            this._highestGrossingMovies = new HighestGrossingMovies();
        }
        return this._highestGrossingMovies;
    }

    private _componentRenderer: ComponentRenderer = null;
    public get renderer(): ComponentRenderer {
        if (this._componentRenderer == null) {
            this._componentRenderer = new ComponentRenderer();
            var context = this._componentRenderer.context;
            PropertyEditorPanelDescriptionModule.register(context);
            LegendDescriptionModule.register(context);
            CategoryChartDescriptionModule.register(context);
        }
        return this._componentRenderer;
    }

}

new Sample();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>Sample | Ignite UI | Web Components | infragistics</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
    <link rel="stylesheet" href="/src/index.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample">
    <div class="options vertical">
        <igc-property-editor-panel
        name="PropertyEditor"
        id="PropertyEditor"
        description-type="CategoryChart"
        is-horizontal="true"
        is-wrapping-enabled="true">
            <igc-property-editor-property-description
            property-path="ToolTipType"
            name="ToolTipTypeEditor"
            id="ToolTipTypeEditor"
            label="ToolTip Type: "
            primitive-value="Data">
            </igc-property-editor-property-description>
        </igc-property-editor-panel>
    </div>

    <div class="legend-title">
        Highest Grossing Movie Franchises
    </div>

    <div class="legend">
        <igc-legend
        name="legend"
        id="legend">
        </igc-legend>
    </div>

    <div class="container fill">
        <igc-category-chart
        name="chart"
        id="chart"
        chart-type="Column"
        x-axis-interval="1"
        y-axis-title="Billions of U.S. Dollars"
        y-axis-title-left-margin="10"
        y-axis-title-right-margin="5"
        y-axis-label-left-margin="0"
        is-horizontal-zoom-enabled="false"
        is-vertical-zoom-enabled="false"
        crosshairs-snap-to-data="true">
        </igc-category-chart>
    </div>
</div>

    </div>

    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

cssコピー

Edit in: Codesandbox

이 샘플이 마음에 드시나요? 당사의 완전한 Ignite UI for Web Components 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

​toolTipType 속성은 구성 가능하며 다음 옵션 중 하나로 설정할 수 있습니다.

자산 가치	설명
Default툴팁	포인터를 항목 위에 놓으면 해당 항목에 대한 도구 설명이 표시됩니다.
Data툴팁	차트의 모든 계열에 대한 데이터 도구 설명을 표시합니다.
Item툴팁	포인터가 위치한 범주의 각 데이터 항목에 대한 도구 설명을 표시합니다.
Category툴팁	포인터가 위치한 범주의 모든 데이터 포인트에 대해 그룹화된 도구 설명을 표시합니다.

Web Components 차트 툴팁 템플릿

기본 제공 도구 설명 유형이 요구 사항과 일치하지 않는 경우 고유한 도구 설명을 만들어 계열 제목, 데이터 값 및 축 값을 표시하고 스타일을 지정할 수 있습니다. 다음 섹션에서는 다양한 유형의 Web Components 차트에서 이 작업을 수행하는 방법을 보여 줍니다.

카테고리 차트의 사용자 정의 도구 설명

이 예제에서는 컨트롤의 모든 계열에 대한 사용자 지정 도구 설명을 만드는 방법을 보여 Web Components IgcCategoryChartComponent. Web Components IgcFinancialChartComponent 컨트롤의 사용자 지정 도구 설명에 동일한 논리를 적용할 수도 있습니다.

EXAMPLE

TS

HTML

CSS

import { IgcCategoryChartModule, IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';
import { IgcDomainChartComponent } from 'igniteui-webcomponents-charts';
import { IgcChartSeriesEventArgs } from 'igniteui-webcomponents-charts';

ModuleManager.register(IgcCategoryChartModule);
ModuleManager.register(IgcDataChartInteractivityModule);

export class CategoryChartTooltipTemplate {

    private chart: IgcCategoryChartComponent;

    public data: any[] = [];

    constructor() {

        this.initData();

        this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
        this.chart.seriesAdded = this.onSeriesAdded;
        this.chart.dataSource = this.data;
    }

    public onSeriesAdded = (s: IgcDomainChartComponent, e: IgcChartSeriesEventArgs) => {
        if (e.series) {
            e.series.tooltipTemplate = this.createCategoryChartTooltipTemplate;
        }
    }

    public createCategoryChartTooltipTemplate(context: any) : any {

        if (!context) return null;

        var dataItem = context.item;
        if (!dataItem) return null;

        var tooltipItem1 = document.createElement("div");
        tooltipItem1.innerHTML = "Franchise: " + dataItem.Franchise;
        tooltipItem1.className = "tooltipTitle";

        var tooltipItem2 = document.createElement("div");
        tooltipItem2.innerHTML = "Revenue of All Movies: " + dataItem.TotalRevenue;
        tooltipItem2.className = "tooltipLbl";

        var tooltipItem3= document.createElement("div");
        tooltipItem3.innerHTML = "Highest Grossing Movie: $" + dataItem.HighestGrossing;
        tooltipItem3.className = "tooltipLbl";

        var tooltip = document.createElement("div");
        tooltip.className = "tooltipVertical";
        tooltip.appendChild(tooltipItem1);
        tooltip.appendChild(tooltipItem2);
        tooltip.appendChild(tooltipItem3);

        return tooltip;
    }

    public initData() {
        this.data = [
            { Franchise: "Marvel Universe All Films", TotalRevenue: 22.55, HighestGrossing: 2.8 },
            { Franchise: "Star Wars", TotalRevenue: 10.32, HighestGrossing: 2.07 },
            { Franchise: "Harry Potter", TotalRevenue: 9.19, HighestGrossing: 1.34 },
            { Franchise: "Avengers", TotalRevenue: 7.76, HighestGrossing: 2.8 },
            { Franchise: "Spider Man", TotalRevenue: 7.22, HighestGrossing: 1.28 },
            { Franchise: "James Bond", TotalRevenue: 7.12, HighestGrossing: 1.11 }
        ];
    }
}

new CategoryChartTooltipTemplate();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>CategoryChartTooltipTemplate</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample">
  <div class="options horizontal">
    <span class="legend-title">Highest Grossing Movie Franchises</span>
  </div>

  <igc-category-chart id="chart"
      width="100%"
      height="calc(100% - 3rem)"
      is-transition-in-enabled="true"
      chart-type="Column"
      tooltip-type="None"
      x-axis-interval="1">
  </igc-category-chart>
</div>

    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

데이터 차트의 사용자 정의 도구 설명

이 예제에서는 컨트롤의 각 계열에 대한 사용자 지정 도구 설명을 만드는 방법을 보여 Web Components 데이터 차트.

EXAMPLE

DATA

TS

HTML

CSS

export class SampleCategoryData {

    public static create(): any[] {
        const data: any[] = [];
        data.push({ "Country": "Canada", "Coal": 400000000, "Oil": 100000000, "Gas": 175000000, "Nuclear": 225000000, "Hydro": 350000000 });
        data.push({ "Country": "China", "Coal": 925000000, "Oil": 200000000, "Gas": 350000000, "Nuclear": 400000000, "Hydro": 625000000 });
        data.push({ "Country": "Russia", "Coal": 550000000, "Oil": 200000000, "Gas": 250000000, "Nuclear": 475000000, "Hydro": 425000000 });
        data.push({ "Country": "Australia", "Coal": 450000000, "Oil": 100000000, "Gas": 150000000, "Nuclear": 175000000, "Hydro": 350000000 });
        data.push({ "Country": "United States", "Coal": 800000000, "Oil": 250000000, "Gas": 475000000, "Nuclear": 575000000, "Hydro": 750000000 });
        data.push({ "Country": "France", "Coal": 375000000, "Oil": 150000000, "Gas": 350000000, "Nuclear": 275000000, "Hydro": 325000000 });
        return data;
    }
}
tsコピー

import { IgcDataChartCoreModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartCategoryModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { IgcColumnSeriesModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartComponent } from 'igniteui-webcomponents-charts';
import { IgcChartMouseEventArgs } from 'igniteui-webcomponents-charts'
import { ModuleManager } from 'igniteui-webcomponents-core';
import { SampleCategoryData } from './SampleCategoryData';

ModuleManager.register(
    IgcDataChartCoreModule,
    IgcDataChartCategoryModule,
    IgcDataChartInteractivityModule,
    IgcColumnSeriesModule
);

export class DataChartTooltipTemplate {

    private chart: IgcDataChartComponent;

    constructor() {

        this.onSeriesMouseEnter = this.onSeriesMouseEnter.bind(this);
        this.createDataChartTooltip = this.createDataChartTooltip.bind(this);
        this.createDataChartTooltipLine = this.createDataChartTooltipLine.bind(this);

        this.chart = document.getElementById('chart') as IgcDataChartComponent;
        this.chart.dataSource = SampleCategoryData.create();
        this.chart.seriesMouseEnter = this.onSeriesMouseEnter;
    }

    public onSeriesMouseEnter = (s: any, e: IgcChartMouseEventArgs) => {
        if (e.series.tooltipTemplate === null ||
            e.series.tooltipTemplate === undefined) {
            e.series.tooltipTemplate = this.createDataChartTooltip;
        }
    }

    public createDataChartTooltip(context: any): any {
        if (!context) return null;

        var dataItem = context.item;
        if (!dataItem) return null;

        var dataSeries = context.series;
        if (!dataSeries) return null;

        var tooltip = document.createElement("div");
        tooltip.className = "ui-tooltip-content";

        var title = document.createElement("div");
        title.innerHTML = dataItem.Country + " Production";
        title.className = "tooltipTitle";
        tooltip.appendChild(title);

        var line1 = this.createDataChartTooltipLine(dataSeries, "Coal", dataItem.Coal);
        var line2 = this.createDataChartTooltipLine(dataSeries, "Hydro", dataItem.Hydro);
        var line3 = this.createDataChartTooltipLine(dataSeries, "Nuclear", dataItem.Nuclear);
        var line4 = this.createDataChartTooltipLine(dataSeries, "Gas", dataItem.Gas);
        var line5 = this.createDataChartTooltipLine(dataSeries, "Oil", dataItem.Oil);

        tooltip.appendChild(line1);
        tooltip.appendChild(line2);
        tooltip.appendChild(line3);
        tooltip.appendChild(line4);
        tooltip.appendChild(line5);

        return tooltip;
    }

    createDataChartTooltipLine(dataSeries: any, dataName: string, dataValue: string): any {
        var label = document.createElement("label");
        label.innerHTML = dataName + ":";
        label.className = "tooltipLbl";
        label.style.width = "4rem";

        var value = document.createElement("label");
        value.innerHTML = dataValue;
        value.className = "tooltipVal";

        var line = document.createElement("div");
        line.className = "tooltipHorizontal";

        // applying conditional styling based on mapping of the current series
        var isMatching = dataSeries.valueMemberPath == dataName;
        if (isMatching)
            line.style.color = dataSeries.actualBrush;
        else
            line.style.color = "black";

        line.appendChild(label);
        line.appendChild(value);
        return line;
    }

}

new DataChartTooltipTemplate();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>DataChartTooltipTemplate</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample">
    <div class="container" style="height: calc(100% - 3rem)">
        <igc-data-chart id="chart" width="100%" height="100%"
            is-horizontal-zoom-enabled="false"
            is-vertical-zoom-enabled="false">

            <igc-category-x-axis name="xAxis" label="Country">
            </igc-category-x-axis>
            <igc-numeric-y-axis name="yAxis">
            </igc-numeric-y-axis>
            <igc-column-series
                name="series1"
                title="Coal"
                x-axis-name="xAxis"
                y-axis-name="yAxis"
                value-member-path="Coal"
                show-default-tooltip="false">
            </igc-column-series>
            <igc-column-series
                name="series2"
                title="Hydro"
                x-axis-name="xAxis"
                y-axis-name="yAxis"
                value-member-path="Hydro"
                show-default-tooltip="false">
            </igc-column-series>
            <igc-column-series
                name="series3"
                title="Nuclear"
                x-axis-name="xAxis"
                y-axis-name="yAxis"
                value-member-path="Nuclear"
                show-default-tooltip="false">
            </igc-column-series>
            <igc-column-series
                name="series4"
                title="Gas"
                x-axis-name="xAxis"
                y-axis-name="yAxis"
                value-member-path="Gas"
                show-default-tooltip="false">
            </igc-column-series>
            <igc-column-series
                name="series5"
                title="Oil"
                x-axis-name="xAxis"
                y-axis-name="yAxis"
                value-member-path="Oil"
                show-default-tooltip="false">
            </igc-column-series>
        </igc-data-chart>
    </div>
</div>

    </div>
    <script src="src/index.ts"></script>

  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

추가 리소스

다음 항목에서 관련 차트 기능에 대한 자세한 내용을 확인할 수 있습니다.

• 차트 주석
• 차트 마커

API 참조

​IgcCategoryChartComponent 및 IgcFinancialChartComponent 구성요소는 다음 API 속성을 공유합니다.

• toolTipType

​IgcDataChartComponent 구성 요소에서는 다음 API 구성 요소 및 속성을 사용할 수 있습니다.

• IgcDataToolTipLayerComponent
• IgcItemToolTipLayerComponent
• IgcCategoryToolTipLayerComponent
• ShowDefaultToolTip