Web Components 차트 기능

Ignite UI for Web Components 차트를 사용하면 차트에 전달할 전체 데이터 스토리를 나타내는 다양한 기능을 표시할 수 있습니다. 이러한 각 기능은 완전히 사용자 정의할 수 있으며 설계 요구 사항에 맞게 스타일을 지정할 수 있으므로 완전히 제어할 수 있습니다. 강조 표시 및 주석과 같은 상호 작용을 통해 중요한 데이터 세부 정보를 호출할 수 있으므로 차트 내에서 더 심층적인 데이터 분석이 가능합니다.

Web Components 차트는 다음과 같은 차트 기능을 제공합니다.

중심선

서로 다른 축 속성을 사용하여 X-Axis와 Y-Axis의 모든 측면을 수정하거나 사용자 지정합니다. 눈금선을 표시하고, 눈금 표시 스타일을 사용자 지정하고, 축 제목을 변경하고, 축 위치 및 교차 값을 수정할 수도 있습니다. Web Components 차트의 축 눈금선, 축 레이아웃 및 축 옵션 항목의 사용자 지정에 대해 자세히 알아볼 수 있습니다.

// data chart's modules:
import { IgcDataChartCoreModule, IgcDataChartScatterModule, IgcDataChartScatterCoreModule, IgcDataChartInteractivityModule,
         IgcDataChartComponent, IgcLegendComponent, IgcNumericXAxisComponent, IgcNumericYAxisComponent } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';

ModuleManager.register(
    IgcDataChartCoreModule,
    IgcDataChartScatterModule,
    IgcDataChartScatterCoreModule,
    IgcDataChartInteractivityModule,
);

export class DataChartAxisCrossing {

    private chart: IgcDataChartComponent;
    private xAxis: IgcNumericXAxisComponent;
    private yAxis: IgcNumericYAxisComponent;
    private xAxisCrossLabel: HTMLLabelElement;
    private yAxisCrossLabel: HTMLLabelElement;

    private data: any[] = [];

    constructor() {
        this.onXAxisSliderChanged = this.onXAxisSliderChanged.bind(this);
        this.onYAxisSliderChanged = this.onYAxisSliderChanged.bind(this);

        this.initData();

        this.chart = document.getElementById('chart') as IgcDataChartComponent;

        this.xAxis = document.getElementById("xAxis") as IgcNumericXAxisComponent;
        this.yAxis = document.getElementById("yAxis") as IgcNumericYAxisComponent;

        this.xAxis.crossingAxis = this.yAxis;
        this.yAxis.crossingAxis = this.xAxis;

        this.xAxisCrossLabel = document.getElementById("xAxisCrossLabel") as HTMLLabelElement;
        this.yAxisCrossLabel = document.getElementById("yAxisCrossLabel") as HTMLLabelElement;

        const xAxisSlider = document.getElementById("xAxisCrossingSlider") as HTMLInputElement;
        xAxisSlider.addEventListener("input", this.onXAxisSliderChanged);

        const yAxisSlider = document.getElementById("yAxisCrossingSlider") as HTMLInputElement;
        yAxisSlider.addEventListener("input", this.onYAxisSliderChanged);

        this.chart.dataSource = this.data;
    }

    public initData() {

        for (let i = -360; i <= 360; i += 10) {
            const radians = (i * Math.PI) / 180;
            const sin = Math.sin(radians);
            const cos = Math.cos(radians);
            this.data.push({ X: i, sinValue: sin, cosValue: cos });
        }
    }

    public onXAxisSliderChanged(e: any) {
        const value = e.target.value;
        this.yAxis.crossingValue = value;
        this.xAxisCrossLabel.textContent = value;
    }

    public onYAxisSliderChanged(e: any) {
        const value = e.target.value;
        this.xAxis.crossingValue = value;
        this.yAxisCrossLabel.textContent = value;
    }
}

new DataChartAxisCrossing();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>DataChartAxisCrossing</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">
      <label class="option-label">X-Axis Crossing Value: </label>
      <label class="options-value" id="xAxisCrossLabel">0</label>
      <input class="options-slider" id="xAxisCrossingSlider" type="range" min="-360" max="360" step="10" value="0"/>
      <label class="option-label">Y-Axis Crossing Value: </label>
      <label class="options-value" id="yAxisCrossLabel">0</label>
      <input class="options-slider" id="yAxisCrossingSlider" type="range" min="-1.25" max="1.25" step="0.125" value="0"/>
    </div>

    <div class="container"  style="height: calc(100% - 3rem)">
        <igc-data-chart id="chart" width="100%" height="100%" is-horizontal-zoom-enabled="true"
                        is-vertical-zoom-enabled="true" plot-area-margin-bottom="60" plot-area-margin-top="60"
                        plot-area-margin-left="30" plot-area-margin-right="30">
            <igc-numeric-x-axis id="xAxis" name="xAxis" interval="40" minimum-value="-360" maximum-value="360"
                                label-location="InsideBottom" label-top-margin="10" crossing-axis-name="yAxis"
                                crossing-value="0" stroke-thickness="1" stroke="Black">
            </igc-numeric-x-axis>
            <igc-numeric-y-axis id="yAxis" name="yAxis" minimum-value="-1.25" maximum-value="1.25" interval="0.25"
                                label-location="InsideLeft" label-right-margin="10" crossing-axis-name="xAxis"
                                crossing-value="0" stroke-thickness="1" stroke="Black">
            </igc-numeric-y-axis>

            <igc-scatter-spline-series x-axis-name="xAxis" y-axis-name="yAxis" marker-type="Circle" x-member-path="X" y-member-path="sinValue"></igc-scatter-spline-series>
            <igc-scatter-spline-series x-axis-name="xAxis" y-axis-name="yAxis" marker-type="Circle" x-member-path="X" y-member-path="cosValue"></igc-scatter-spline-series>
        </igc-data-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

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

주석

이러한 추가 레이어는 마우스/터치에 따라 달라지는 차트 상단에 있습니다. 개별적으로 또는 결합하여 사용하면 차트 내의 특정 값을 강조 표시하는 데 도움이 되는 강력한 상호 작용을 제공합니다. 차트 주석 항목에서 이 기능에 대해 자세히 알아볼 수 있습니다.

import { IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';
import { IgcMarkerTypeCollection } from 'igniteui-webcomponents-charts';
import { MarkerType } from 'igniteui-webcomponents-charts';
import { CrosshairsDisplayMode } from 'igniteui-webcomponents-charts';

ModuleManager.register(IgcCategoryChartModule);

export class Sample {

    private chart: IgcCategoryChartComponent;
    public includedProperties: string[] = ["Year", "USA"];
    public data: any[] = [];

    constructor() {

        this.onCrosshairsVisible = this.onCrosshairsVisible.bind(this);
        this.onCalloutsVisible = this.onCalloutsVisible.bind(this);
        this.onFinalValuesVisible = this.onFinalValuesVisible.bind(this);
        this.onMarkersVisible = this.onMarkersVisible.bind(this);

        this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
        this.initData();
        this.chart.dataSource = this.data;

        this.chart.includedProperties = this.includedProperties;

        let checkbox1 = document.getElementById('checkbox1');
        checkbox1!.addEventListener('change', this.onCrosshairsVisible);

        let checkbox2 = document.getElementById('checkbox2');
        checkbox2!.addEventListener('change', this.onCalloutsVisible);

        let checkbox3 = document.getElementById('checkbox3');
        checkbox3!.addEventListener('change', this.onFinalValuesVisible);

        let checkbox4 = document.getElementById('checkbox4');
        checkbox4!.addEventListener('change', this.onMarkersVisible);
    }

    public initData() {
        this.data = [
            { Year: "2009", USA: 19 },
            { Year: "2010", USA: 24 },
            { Year: "2011", USA: 28 },
            { Year: "2012", USA: 26 },
            { Year: "2013", USA: 38 },
            { Year: "2014", USA: 31 },
            { Year: "2015", USA: 19 },
            { Year: "2016", USA: 52 },
            { Year: "2017", USA: 50 },
            { Year: "2018", USA: 34 },
            { Year: "2019", USA: 38 },
        ];

        let idx: number = 0;

        for (const item of this.data) {
            item.index = idx;
            item.value = item.USA;
            item.label = item.USA + " " + "TWh";
            idx++;
        }
    }

    public onCrosshairsVisible = (e: any) => {
        const isVisible = e.target.checked;
        this.chart.crosshairsAnnotationEnabled = isVisible;

        if (isVisible) {
            this.chart.crosshairsDisplayMode = CrosshairsDisplayMode.Both;
        }
        else {
            this.chart.crosshairsDisplayMode = CrosshairsDisplayMode.None;
        }
    }

    public onCalloutsVisible = (e: any) => {

        let value = e.target.checked;
        this.chart.calloutsVisible = value;
    }

    public onFinalValuesVisible = (e: any) => {

        let value = e.target.checked;
        this.chart.finalValueAnnotationsVisible = value;
    }

    public onMarkersVisible = (e: any) => {
        const visible = e.target.checked;
        const markers = e.target.checked ? 'Circle' : 'None';

        switch (markers) {
            case 'Circle': {
                let collection: IgcMarkerTypeCollection = new IgcMarkerTypeCollection();
                collection.add(MarkerType.Circle);
                this.chart.markerTypes = collection;
                break;
            }
            case 'None': {
                let collection: IgcMarkerTypeCollection = new IgcMarkerTypeCollection();
                collection.add(MarkerType.None);
                this.chart.markerTypes = collection;
                break;
            }
        }
    }
}

new Sample();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>CategoryChartLineChartWithAnnotations</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">
        <label class="options-label">Annotations: </label>
        <label class="options-label"><input type="checkbox" id="checkbox1" checked="true"></input> Crosshair </label>
        <label class="options-label"><input type="checkbox" id="checkbox2" checked="true"></input> Callouts </label>
        <label class="options-label"><input type="checkbox" id="checkbox3" checked="true"></input> Final Values </label>
        <label class="options-label"><input type="checkbox" id="checkbox4" checked="true"></input> Markers </label>
    </div>
    <div class="container fill" style="height: calc(100% - 1.25rem)">
      <igc-category-chart id="chart"
          width="100%" height="100%"
          chart-type="Line"
          subtitle="Renewable Electricity Generated"
          is-horizontal-zoom-enabled="false"
          is-vertical-zoom-enabled="false"
          yAxisTitle="TWh"
          y-axis-label-location="OutsideRight"
          thickness="2"
          callouts-visible="true"
          callouts-x-member-path="index"
          callouts-y-member-path="value"
          callouts-label-member-path="label"
          crosshairs-snap-to-data="false"
          crosshairs-display-mode="Both"
          crosshairs-annotation-enabled="true"
          final-value-annotations-visible="true"
          marker-types="Circle"
		  computed-plot-area-margin-mode="Series">
        </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

애니메이션

애니메이션을 활성화하여 새 데이터 소스를 로드할 때 차트에 애니메이션을 적용하세요. 다양한 유형의 애니메이션과 해당 애니메이션이 발생하는 속도를 설정하여 사용자 정의할 수 있습니다. 차트 애니메이션 항목에서 이 기능에 대해 자세히 알아볼 수 있습니다.

import { IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';

ModuleManager.register(
    IgcCategoryChartModule
);

export class CategoryChartLineChartWithAnimations {

    private chart: IgcCategoryChartComponent;
    private transitionLabel: HTMLLabelElement;

    public data: any[] = [];

    constructor() {

        this.onAnimationChanged = this.onAnimationChanged.bind(this);
        this.onTransitionTimeChanged = this.onTransitionTimeChanged.bind(this);
        this.onReloadChartBtnClicked = this.onReloadChartBtnClicked.bind(this);
        this.reloadChart = this.reloadChart.bind(this);

        this.initData();

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

        const animationSelect = document.getElementById("animationSelect") as HTMLSelectElement;
        animationSelect.addEventListener("change", this.onAnimationChanged);

        this.transitionLabel = document.getElementById("transitionLabel") as HTMLLabelElement;

        const transitionSlider = document.getElementById("transitionSlider") as HTMLInputElement;
        transitionSlider.addEventListener("change", this.onTransitionTimeChanged);

        const reloadChartButton = document.getElementById("reloadChartBtn") as HTMLButtonElement;
        reloadChartButton.addEventListener("click", this.onReloadChartBtnClicked);
    }

    public initData() {
        this.data = [
            { Year: "2009", Europe: 31, China: 21, USA: 19 },
            { Year: "2010", Europe: 43, China: 26, USA: 24 },
            { Year: "2011", Europe: 66, China: 29, USA: 28 },
            { Year: "2012", Europe: 69, China: 32, USA: 26 },
            { Year: "2013", Europe: 58, China: 47, USA: 38 },
            { Year: "2014", Europe: 40, China: 46, USA: 31 },
            { Year: "2015", Europe: 78, China: 50, USA: 19 },
            { Year: "2016", Europe: 13, China: 90, USA: 52 },
            { Year: "2017", Europe: 78, China: 132, USA: 50 },
            { Year: "2018", Europe: 40, China: 134, USA: 34 },
            { Year: "2019", Europe: 80, China: 96, USA: 38 }
        ];
    }

    public onAnimationChanged(e: any) {
        this.chart.transitionInMode = e.target.value;
        this.reloadChart();
    }

    public onTransitionTimeChanged(e: any) {
        this.chart.transitionInDuration = e.target.value;
        this.transitionLabel.textContent = e.target.value + "ms";
        this.reloadChart();
    }

    public onReloadChartBtnClicked(e: any) {
        this.reloadChart();
    }

    public reloadChart() {
        this.chart.replayTransitionIn();
    }
}

new CategoryChartLineChartWithAnimations();
ts

<!DOCTYPE html>
<html>

<head>
  <title>CategoryChartLineChartWithAnimations</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="options-label">Transition Type </span>
        <select id="animationSelect">
            <option>Auto</option>
            <option>AccordionFromBottom</option>
            <option>AccordionFromCategoryAxisMaximum</option>
            <option>AccordionFromCategoryAxisMinimum</option>
            <option>AccordionFromLeft</option>
            <option>AccordionFromRight</option>
            <option>AccordionFromTop</option>
            <option>AccordionFromValueAxisMaximum</option>
            <option>AccordionFromValueAxisMinimum</option>
            <option>Expand</option>
            <option>FromZero</option>
            <option>SweepFromBottom</option>
            <option>SweepFromCategoryAxisMaximum</option>
            <option>SweepFromCategoryAxisMinimum</option>
            <option>SweepFromCenter</option>
            <option>SweepFromLeft</option>
            <option>SweepFromRight</option>
            <option>SweepFromTop</option>
            <option>SweepFromValueAxisMaximum</option>
            <option>SweepFromValueAxisMinimum</option>
        </select>
        <label id="transitionLabel" class="options-value" style="width: 75px">1000ms</label>
        <input id="transitionSlider" class="options-slider" type="range" min="50" max="2000" step="50" value="1000" />
        <button id="reloadChartBtn">Reload Chart</button>
      </div>

      <igc-category-chart id="chart" width="100%" height="calc(100% - 30px)"
           chart-type="Line"
           is-transition-in-enabled="true"
           is-horizontal-zoom-enabled="false"
           is-vertical-zoom-enabled="false"
           y-axis-title="TWh"
           y-axis-title-left-margin="10"
           y-axis-title-right-margin="5"
           y-axis-label-left-margin="0"
		   computed-plot-area-margin-mode="Series">
      </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

강조

마우스를 데이터 항목 위로 가져가면 선, 열 또는 표식과 같은 시각적 개체를 강조 표시하여 초점을 맞춥니다. 이 기능은 모든 차트 유형에서 활성화됩니다. 차트 강조 항목에서 이 기능에 대해 자세히 알아볼 수 있습니다.

import { SeriesHighlightingBehavior, LegendHighlightingMode, SeriesHighlightingMode, IgcLegendModule, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';

ModuleManager.register(IgcCategoryChartModule, IgcLegendModule);

export class CategoryChartHighlighting {

    private chart: IgcCategoryChartComponent;
    private legend: IgcLegendComponent
    public data: any[] = [];

    constructor() {

        this.onHighlightingTargetChanged = this.onHighlightingTargetChanged.bind(this);
        this.onHighlightingModeChanged = this.onHighlightingModeChanged.bind(this);
        this.onBehaviorModeChanged = this.onBehaviorModeChanged.bind(this);
        this.onLegendHighlightingModeChanged = this.onLegendHighlightingModeChanged.bind(this);

        this.initData();

        this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
        this.chart.dataSource = this.data;
        this.legend = document.getElementById('Legend') as IgcLegendComponent;
        this.chart.legend = this.legend
        this.chart.isItemHighlightingEnabled = false;
        this.chart.isSeriesHighlightingEnabled = true;
        this.chart.isCategoryHighlightingEnabled = false;
        this.chart.highlightingMode = SeriesHighlightingMode.Auto;
        this.chart.highlightingBehavior = SeriesHighlightingBehavior.Auto;
        this.chart.legendHighlightingMode = LegendHighlightingMode.Auto;

        const highlightingTarget1 = document.getElementById('highlightingTarget') as HTMLSelectElement;
        highlightingTarget1!.addEventListener('change', this.onHighlightingTargetChanged);

        const highlightingMode = document.getElementById("highlightingMode") as HTMLSelectElement;
        highlightingMode!.addEventListener("change", this.onHighlightingModeChanged);

        const behaviorMode = document.getElementById("behaviorMode") as HTMLSelectElement;
        behaviorMode!.addEventListener("change", this.onBehaviorModeChanged);

        const legendHighlightingMode = document.getElementById("legendHighlightingMode") as HTMLSelectElement;
        legendHighlightingMode!.addEventListener("change", this.onLegendHighlightingModeChanged);
    }

    public onHighlightingTargetChanged = (e: any) => {
        let value = e.target.value as String;

        if(value == "Series"){
            this.chart.isItemHighlightingEnabled = false;
            this.chart.isSeriesHighlightingEnabled = true;
            this.chart.isCategoryHighlightingEnabled = false;
        }
         else if(value == "Item") {
            this.chart.isItemHighlightingEnabled = true;
            this.chart.isSeriesHighlightingEnabled = false;
            this.chart.isCategoryHighlightingEnabled = false;
        }
         else if(value == "Category") {
            this.chart.isItemHighlightingEnabled = false;
            this.chart.isSeriesHighlightingEnabled = false;
            this.chart.isCategoryHighlightingEnabled = true;
        }
         else if(value=="None") {
            this.chart.isItemHighlightingEnabled = false;
            this.chart.isSeriesHighlightingEnabled = false;
            this.chart.isCategoryHighlightingEnabled = false;
        }
    }

    public onHighlightingModeChanged(e: any) {
        this.chart.highlightingMode = e.target.value as SeriesHighlightingMode;
    }

    public onBehaviorModeChanged(e: any) {
        this.chart.highlightingBehavior = e.target.value as SeriesHighlightingBehavior;
    }

    public onLegendHighlightingModeChanged(e: any) {
        this.chart.legendHighlightingMode = e.target.value as LegendHighlightingMode;
    }

    public initData() {
        const CityTemperatureData: any = [
            { Month: "JAN", NewYork: 10.6, LosAngeles: 28.3},
            { Month: "FEB", NewYork: 7.8,  LosAngeles: 31.1},
            { Month: "MAR", NewYork: 12.2, LosAngeles: 27.8},
            { Month: "APR", NewYork: 11.7, LosAngeles: 33.9},
            { Month: "MAY", NewYork: 19.4, LosAngeles: 35.0},
            { Month: "JUN", NewYork: 23.3, LosAngeles: 36.7},
            { Month: "JUL", NewYork: 27.2, LosAngeles: 33.3},
            { Month: "AUG", NewYork: 25.6, LosAngeles: 36.7},
            { Month: "SEP", NewYork: 22.8, LosAngeles: 43.9},
            { Month: "OCT", NewYork: 17.8, LosAngeles: 38.3 },
            { Month: "NOV", NewYork: 17.8, LosAngeles: 32.8},
            { Month: "DEC", NewYork: 8.3, LosAngeles: 28.9},
        ];
        this.data = [ CityTemperatureData];
    }

}

new CategoryChartHighlighting();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>CategoryChartColumnChartWithHighlighting</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">
        <label class="options-label">Highlight Target: </label>
        <select id="highlightingTarget">
          <option>Series</option>
          <option>Item</option>
          <option>Category</option>
          <option>None</option>
        </select>

        <span class="options-label">Mode:</span>
        <select id="highlightingMode">
          <option>Auto</option>
          <option>Brighten</option>
          <option>BrightenSpecific</option>
          <option>FadeOthers</option>
          <option>FadeOthersSpecific</option>
          <option>None</option>
        </select>
        <span class="options-label">Behavior:</span>
        <select id="behaviorMode">
          <option>Auto</option>
          <option>DirectlyOver</option>
          <option>NearestItems</option>
          <option>NearestItemsAndSeries</option>
          <option>NearestItemsRetainMainShapes</option>
        </select>
        <span class="options-label">Legend:</span>
        <select id="legendHighlightingMode">
          <option>Auto</option>
          <option>MatchSeries</option>
          <option>None</option>
        </select>
    </div>
    <div class="options vertical">
      <span class="legend-title">
         Average Temperatures in the U.S. Cities
      </span>
      <div class="legend">
          <igc-legend
          orientation="Horizontal"
          name="Legend"
          id ="Legend">
          </igc-legend>
      </div>
    </div>
    <igc-category-chart id="chart" style="height: calc(100% - 3rem)"
        width="100%"
        height="100%"
        x-axis-interval="1"
        y-axis-minimum-value="0"
        y-axis-title="Temperatures in Celsius"
        is-series-highlighting-enabled="true"
        is-category-highlighting-enabled="true"
        is-item-highlighting-enabled="true">
    </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

마커

차트 시리즈의 마커를 사용하면 값이 주요 눈금선 사이에 있는 경우에도 데이터 요소를 빠르게 식별할 수 있습니다. 스타일, 색상 및 모양을 완벽하게 사용자 정의할 수 있습니다. 차트 표시 항목에서 이 기능에 대해 자세히 알아볼 수 있습니다.

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

    public year: string;
    public europe: number;
    public china: number;
    public america: number;

}
export class CountryRenewableElectricity extends Array<CountryRenewableElectricityItem> {
    public constructor(items: Array<CountryRenewableElectricityItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new CountryRenewableElectricityItem(
                {
                    year: `2009`,
                    europe: 34,
                    china: 21,
                    america: 19
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2010`,
                    europe: 43,
                    china: 26,
                    america: 24
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2011`,
                    europe: 66,
                    china: 29,
                    america: 28
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2012`,
                    europe: 69,
                    china: 32,
                    america: 26
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2013`,
                    europe: 58,
                    china: 47,
                    america: 38
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2014`,
                    europe: 40,
                    china: 46,
                    america: 31
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2015`,
                    europe: 78,
                    china: 50,
                    america: 19
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2016`,
                    europe: 13,
                    china: 90,
                    america: 52
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2017`,
                    europe: 78,
                    china: 132,
                    america: 50
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2018`,
                    europe: 40,
                    china: 134,
                    america: 34
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2018`,
                    europe: 40,
                    china: 134,
                    america: 34
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2019`,
                    europe: 80,
                    china: 96,
                    america: 38
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
ts

import { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import { IgcCategoryChartModule, IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, CategoryChartDescriptionModule, DataChartInteractivityDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { IgcPropertyEditorPropertyDescriptionChangedEventArgs } from 'igniteui-webcomponents-layouts';
import { MarkerType, MarkerType_$type } from 'igniteui-webcomponents-charts';
import { EnumUtil } from 'igniteui-webcomponents-core';
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,
    IgcCategoryChartModule,
    IgcDataChartInteractivityModule
);

export class Sample {

    private propertyEditor: IgcPropertyEditorPanelComponent
    private chartTypeEditor: IgcPropertyEditorPropertyDescriptionComponent
    private markerTypeEditor: IgcPropertyEditorPropertyDescriptionComponent
    private chart: IgcCategoryChartComponent
    private _bind: () => void;

    constructor() {
        var propertyEditor = this.propertyEditor = document.getElementById('PropertyEditor') as IgcPropertyEditorPanelComponent;
        var chartTypeEditor = this.chartTypeEditor = document.getElementById('ChartTypeEditor') as IgcPropertyEditorPropertyDescriptionComponent;
        var markerTypeEditor = this.markerTypeEditor = document.getElementById('MarkerTypeEditor') as IgcPropertyEditorPropertyDescriptionComponent;
        this.editorChangeUpdateMarkerType = this.editorChangeUpdateMarkerType.bind(this);
        var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;

        this._bind = () => {
            propertyEditor.componentRenderer = this.renderer;
            propertyEditor.target = this.chart;
            markerTypeEditor.changed = this.editorChangeUpdateMarkerType;
            chart.dataSource = this.countryRenewableElectricity;
        }
        this._bind();
    }

    private _countryRenewableElectricity: CountryRenewableElectricity = null;
    public get countryRenewableElectricity(): CountryRenewableElectricity {
        if (this._countryRenewableElectricity == null)
        {
            this._countryRenewableElectricity = new CountryRenewableElectricity();
        }
        return this._countryRenewableElectricity;
    }

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

    public editorChangeUpdateMarkerType(sender: any, args: IgcPropertyEditorPropertyDescriptionChangedEventArgs): void {
        var item = sender as IgcPropertyEditorPropertyDescriptionComponent;
        var chart = this.chart;

        var markerVal = item.primitiveValue;
        chart.markerTypes = markerVal;
    }

}

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="ChartType"
            name="ChartTypeEditor"
            id="ChartTypeEditor"
            label="Chart Type"
            primitive-value="Line">
            </igc-property-editor-property-description>
            <igc-property-editor-property-description
            property-path="MarkerTypeHandler"
            name="MarkerTypeEditor"
            id="MarkerTypeEditor"
            label="Marker Type"
            should-override-default-editor="true"
            value-type="EnumValue"
            drop-down-values="Circle, Automatic, Triangle, Pyramid, Square, Diamond, Pentagon, Hexagon, Tetragram, Pentagram, Hexagram, None"
            drop-down-names="Circle, Automatic, Triangle, Pyramid, Square, Diamond, Pentagon, Hexagon, Tetragram, Pentagram, Hexagram, None"
            primitive-value="Circle">
            </igc-property-editor-property-description>
        </igc-property-editor-panel>
    </div>

    <div class="legend-title">
        Renewable Electricity Generated
    </div>

    <div class="container fill">
        <igc-category-chart
        name="chart"
        id="chart"
        is-series-highlighting-enabled="true"
        chart-type="Line"
        computed-plot-area-margin-mode="Series">
        </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

마우스, 키보드 및 터치 상호 작용을 통해 확대/축소 및 이동하여 차트를 탐색할 수 있습니다. 차트 탐색 항목에서 이 기능에 대해 자세히 알아볼 수 있습니다.



export class SampleFinancialData {

    public static create(items?: number): any[] {
        // initial values
        let v = 10000;
        let o = 500;
        let h = Math.round(o + (Math.random() * 5));
        let l = Math.round(o - (Math.random() * 5));
        let c = Math.round(l + (Math.random() * (h - l)));

        if (items === undefined) {
            items = 200;
        }

        const today = new Date();
        const end = new Date(today.getFullYear(), 11, 1);
        let time = this.addDays(end, -items);

        const data: any[] = [];
        for (let i = 0; i < items; i++) {
            const date = time.toDateString();
            const label = this.getShortDate(time, false);
            // adding new data item
            data.push({"Time": time, "Date": date, "Label": label, "Close": c, "Open": o, "High": h, "Low": l, "Volume": v});
            // generating new values
            const mod = Math.random() - 0.45;
            o = Math.round(o + (mod * 5 * 2));
            v = Math.round(v + (mod * 5 * 100));
            h = Math.round(o + (Math.random() * 5));
            l = Math.round(o - (Math.random() * 5));
            c = Math.round(l + (Math.random() * (h - l)));
            time = this.addDays(time, 1);
        }
        return data;
    }

    public static addDays(dt: Date, days: number): Date {
        return new Date(dt.getTime() + days * 24 * 60 * 60 * 1000);
    }

    public static getShortDate(dt: Date, showYear: boolean): string {
        const months = [
            "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
        ];
        const ind = dt.getMonth();
        const day = dt.getDay() + 1;
        let label = months[ind] + " " + day;
        if (showYear) {
            label += " " +  dt.getFullYear();
        }
        return label;
    }
}
ts

import { ModuleManager } from 'igniteui-webcomponents-core';
// data chart's modules:
import { IgcDataChartComponent } from 'igniteui-webcomponents-charts';
import { IgcDataChartCoreModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartCategoryModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
// financial series modules:
import { IgcDataChartFinancialModule } from 'igniteui-webcomponents-charts';
// data chart's elements:
import { IgcNumericYAxisComponent } from 'igniteui-webcomponents-charts';
import { IgcCategoryXAxisComponent } from 'igniteui-webcomponents-charts';
import { IgcFinancialPriceSeriesComponent } from 'igniteui-webcomponents-charts';
import { InteractionState } from 'igniteui-webcomponents-core';
import { ModifierKeys } from 'igniteui-webcomponents-core';
import { SampleFinancialData } from './SampleFinancialData';

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

export class DataChartNavigation {

    private chart: IgcDataChartComponent;

    constructor() {

        this.chart = document.getElementById('chart') as IgcDataChartComponent;
        this.chart.dataSource = SampleFinancialData.create();

        this.chart.actualWindowScaleHorizontal = 0.60;
        this.chart.actualWindowScaleVertical = 0.60;
        this.chart.actualWindowPositionVertical = 0.20;
        this.chart.actualWindowPositionHorizontal = 0.20;

        const panUp = document.getElementById('panUp') as HTMLButtonElement;
        panUp!.addEventListener('click', this.onPanUpClick);

        const panLeft = document.getElementById('panLeft') as HTMLButtonElement;
        panLeft!.addEventListener('click', this.onPanLeftClick);

        const zoomIn = document.getElementById('zoomIn') as HTMLButtonElement;
        zoomIn!.addEventListener('click', this.onZoomInClick);

        const panDown = document.getElementById('panDown') as HTMLButtonElement;
        panDown!.addEventListener('click', this.onPanDownClick);

        const panRight = document.getElementById('panRight') as HTMLButtonElement;
        panRight!.addEventListener('click', this.onPanRightClick);

        const zoomOut = document.getElementById('zoomOut') as HTMLButtonElement;
        zoomOut!.addEventListener('click', this.onZoomOutClick);

        const panModSelect = document.getElementById('panModSelect') as HTMLSelectElement;
        panModSelect!.value = 'Alt';
        panModSelect!.addEventListener('change', this.onPanModifierChange);

        const interactionSelect = document.getElementById('interactionSelect') as HTMLSelectElement;
        interactionSelect!.value = 'DragPan';
        interactionSelect!.addEventListener('change', this.onDefaultInteractionChange);

        const dragModSelect = document.getElementById('dragModSelect') as HTMLSelectElement;
        dragModSelect!.value = 'Shift';
        dragModSelect!.addEventListener('change', this.onDragModifierChange);

        const zoomEnabled = document.getElementById('zoomEnabled') as HTMLInputElement;
        zoomEnabled!.checked = true;
        zoomEnabled!.addEventListener('change', this.onZoomEnabledChange);
    }

    public onDefaultInteractionChange = (e: any) => {
        switch (e.target.value) {
            case 'DragZoom':
                this.chart.defaultInteraction = InteractionState.DragZoom;
                break;
            case 'DragPan':
                this.chart.defaultInteraction = InteractionState.DragPan;
                break;
            case 'None':
                this.chart.defaultInteraction = InteractionState.None;
                break;
        }
    }

    public onPanModifierChange = (e: any) => {
        switch (e.target.value) {
            case 'Alt':
                this.chart.panModifier = ModifierKeys.Alt;
                break;
            case 'Control':
                this.chart.panModifier = ModifierKeys.Control;
                break;
            case 'Shift':
                this.chart.panModifier = ModifierKeys.Shift;
                break;
            case 'Windows':
                this.chart.panModifier = ModifierKeys.Windows;
                break;
            case 'Apple':
                this.chart.panModifier = ModifierKeys.Apple;
                break;
            case 'None':
                this.chart.panModifier = ModifierKeys.None;
                break;
        }
    }

    public onDragModifierChange = (e: any) => {
        switch (e.target.value) {
            case 'Alt':
                this.chart.dragModifier = ModifierKeys.Alt;
                break;
            case 'Control':
                this.chart.dragModifier = ModifierKeys.Control;
                break;
            case 'Shift':
                this.chart.dragModifier = ModifierKeys.Shift;
                break;
            case 'Windows':
                this.chart.dragModifier = ModifierKeys.Windows;
                break;
            case 'Apple':
                this.chart.dragModifier = ModifierKeys.Apple;
                break;
            case 'None':
                this.chart.dragModifier = ModifierKeys.None;
                break;
        }
    }

    public onZoomEnabledChange = (e: any) => {
        const isZoomEnabled = e.target.checked;
        this.chart.isHorizontalZoomEnabled = isZoomEnabled;
        this.chart.isVerticalZoomEnabled = isZoomEnabled;
    }

    public onPanUpClick = (e: any) => {
        this.chart.actualWindowPositionVertical -= 0.05;
    }

    public onPanDownClick = (e: any) => {
        this.chart.actualWindowPositionVertical += 0.05;
    }

    public onPanLeftClick = (e: any) => {
        this.chart.actualWindowPositionHorizontal -= 0.05;
    }

    public onPanRightClick = (e: any) => {
        this.chart.actualWindowPositionHorizontal += 0.05;
    }

    public onZoomOutClick = (e: any) => {
        if (this.chart.actualWindowPositionHorizontal > 0.025) {
            this.chart.actualWindowPositionHorizontal -= 0.025;
        }
        if (this.chart.actualWindowPositionVertical > 0.025) {
            this.chart.actualWindowPositionVertical -= 0.025;
        }

        if (this.chart.actualWindowScaleHorizontal < 1.0) {
            this.chart.actualWindowScaleHorizontal += 0.05;
        }
        if (this.chart.actualWindowScaleVertical < 1.0) {
            this.chart.actualWindowScaleVertical += 0.05;
        }
    }

    public onZoomInClick = (e: any) => {
        if (this.chart.actualWindowPositionHorizontal < 1.0) {
            this.chart.actualWindowPositionHorizontal += 0.025;
        }
        if (this.chart.actualWindowPositionVertical < 1.0) {
            this.chart.actualWindowPositionVertical += 0.025;
        }

        if (this.chart.actualWindowScaleHorizontal > 0.05) {
            this.chart.actualWindowScaleHorizontal -= 0.05;
        }
        if (this.chart.actualWindowScaleVertical > 0.05) {
            this.chart.actualWindowScaleVertical -= 0.05;
        }
    }
}

new DataChartNavigation();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>DataChartNavigation</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">
        <div class="options vertical" style="width: 100px">
            <button id="panUp">Pan Up</button>
            <button id="panDown">Pan Down</button>
        </div>
        <div class="options vertical" style="width: 100px">
            <button id="panLeft">Pan Left</button>
            <button id="panRight">Pan Right</button>
        </div>
        <div class="options vertical" style="width: 100px">
            <button id="zoomIn">Zoom In</button>
            <button id="zoomOut">Zoom Out</button>
        </div>
        <div class="options vertical" style="width: 120px; align-self: center">
            <label class="options-label" style="margin: 5px">Pan Modifier:</label>
            <label class="options-label" style="margin: 5px">Zoom Modifier:</label>
        </div>
        <div class="options vertical" style="width: 100px">
            <select id="panModSelect" style="margin: 5px">
                <option>Alt</option>
                <option>Control</option>
                <option>Shift</option>
                <option>Windows</option>
                <option>Apple</option>
                <option>None</option>
            </select>
            <select id="dragModSelect" style="margin: 5px">
                <option>Alt</option>
                <option>Control</option>
                <option>Shift</option>
                <option>Windows</option>
                <option>Apple</option>
                <option>None</option>
            </select>
        </div>
        <div class="options vertical" style="width: 150px; align-self: center">
            <label class="options-label" style="margin: 5px;">Interaction:</label>
            <label class="options-label" style="margin: 5px;">Zooming:</label>
        </div>
        <div class="options vertical" style="width: 100px">
            <select id="interactionSelect" style="margin: 5px">
                <option>DragZoom</option>
                <option>DragPan</option>
                <option>None</option>
            </select>
            <input id="zoomEnabled" class="options-item" type="checkbox" @onchange="OnEnableZoomingChange" checked="@IsZoomingEnabled" />
        </div>
    </div>

    <div class="container vertical">
        <igc-data-chart
            id="chart"
            width="100%"
            height="100%"
            subtitle="Stock Prices Series in Candlestick Display Type"
            subtitle-top-margin="10"
            is-horizontal-zoom-enabled="true"
            is-vertical-zoom-enabled="true"
            pan-modifier="Alt"
            drag-modifier="Shift"
            default-interaction="DragPan">
            <igc-category-x-axis
                name="xAxis"
                label="Label"></igc-category-x-axis>
            <igc-numeric-y-axis
                name="yAxis"
                title="Amount (in USD)"
                title-right-margin="10"
                label-right-margin="10"
                label-horizontal-alignment="Left"
                label-location="OutsideRight"></igc-numeric-y-axis>
            <igc-financial-price-series
                x-axis-name="xAxis"
                y-axis-name="yAxis"
                display-type="Candlestick"
                open-member-path="Open"
                close-member-path="Close"
                high-member-path="High"
                low-member-path="Low"
                volume-member-path="Volume"
                show-default-tooltip="true"
                is-transition-in-enabled="true"
                title="Price"></igc-financial-price-series>
        </igc-data-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

오버레이

오버레이를 사용하면 차트에 가로 또는 세로 선을 그려 중요한 값과 임계값에 주석을 달 수 있습니다. 차트 오버레이 항목에서 이 기능에 대해 자세히 알아볼 수 있습니다.

import { IgcDataChartCoreModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartCategoryCoreModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartCategoryModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { IgcColumnSeriesModule } from 'igniteui-webcomponents-charts';
import { IgcValueOverlayModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartComponent } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';

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

export class DataChartSeriesValueOverlay {

    private chart: IgcDataChartComponent;

    constructor() {

        this.chart = document.getElementById('chart') as IgcDataChartComponent;
        this.chart.dataSource = this.getData();
    }

    getData(): any[] {
        const data = [
            { 'Label': 1, 'Value': 1.0 },
            { 'Label': 2, 'Value': 2.0 },
            { 'Label': 3, 'Value': 6.0 },
            { 'Label': 4, 'Value': 8.0 },
            { 'Label': 5, 'Value': 2.0 },
            { 'Label': 6, 'Value': 6.0 },
            { 'Label': 7, 'Value': 4.0 },
            { 'Label': 8, 'Value': 2.0 },
            { 'Label': 9, 'Value': 1.0 },
        ];

        return data;
    }
}

new DataChartSeriesValueOverlay();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>DataChartSeriesValueOverlay</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: 100%">
        <igc-data-chart id="chart" width="100%" height="100%"
        is-horizontal-zoom-enabled="true"
        is-vertical-zoom-enabled="true">

            <igc-category-x-axis name="xAxis" label="Label">
            </igc-category-x-axis>
            <igc-numeric-y-axis name="yAxis" minimum-value="0" maximum-value="10">
            </igc-numeric-y-axis>

            <igc-column-series name="series1" x-axis-name="xAxis" y-axis-name="yAxis" value-member-path="Value">
            </igc-column-series>

            <igc-value-overlay name="overlay1" axis-name="yAxis" value="2.0" thickness="5">
            </igc-value-overlay>
            <igc-value-overlay name="overlay2" axis-name="yAxis" value="3.6" thickness="5">
            </igc-value-overlay>
            <igc-value-overlay name="overlay3" axis-name="yAxis" value="5.8" thickness="5">
            </igc-value-overlay>
            <igc-value-overlay name="overlay4" axis-name="yAxis" value="1.0" thickness="5">
            </igc-value-overlay>
            <igc-value-overlay name="overlay5" axis-name="yAxis" value="8.0" thickness="5">
            </igc-value-overlay>
            <igc-value-overlay name="overlay6" axis-name="yAxis" value="7.0" thickness="5">
            </igc-value-overlay>
            <igc-value-overlay name="overlay7" axis-name="yAxis" value="5.0" thickness="5">
            </igc-value-overlay>
        </igc-data-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

성능

Web Components 차트는 수백만 개의 데이터 포인트를 렌더링하고 몇 밀리초마다 업데이트하는 고성능에 최적화되어 있습니다. 그러나 차트의 성능에 영향을 주는 몇 가지 차트 기능이 있으며 응용 프로그램에서 성능을 최적화할 때 이러한 기능을 고려해야 합니다. 이 기능에 대한 자세한 내용은 차트 성능 항목에서 확인할 수 있습니다.



export class CategoryChartSharedData {

    public static generateItems(startValue: number, maxPoints: number, useShortLabels?: boolean): any[] {

        const data: any[] = [];
        let value = startValue;
        for (let i = 0; i <= maxPoints; i++) {
            value += Math.random() * 4.0 - 2.0;
            const v = Math.round(value);
            let l = i.toString();
            if (useShortLabels) {
                l = this.toShortString(i);
            }
            data.push({ Label: l, Value: v });
        }
        return data;
    }

    public static getTemperatures(startValue: number, startYear: number, endYear: number): any[] {
        const data: any[] = [];
        let value = startValue;
        for (let i = startYear; i <= endYear; i++) {
            value += (Math.random() - 0.5) * 0.5;
            const v = Math.abs(Math.round(value * 10) / 10);
            data.push({ Label: i.toString(), Value: v });
        }
        return data;
    }

    public static getLastItem(array: any[]): any {
        if (array.length === 0) {
            return null;
        }
        return array[array.length - 1];
    }

    public static getNewItem(array: any[], index: number): any {
        const lastItem = this.getLastItem(array);
        const newValue = lastItem.Value + Math.random() * 4.0 - 2.0;
        return { Label: index.toString(), Value: newValue };
    }

    public static toShortString(largeValue: number): string {
        let roundValue: number;

        if (largeValue >= 1000000) {
            roundValue = Math.round(largeValue / 100000) / 10;
            return roundValue + "m";
        }
        if (largeValue >= 1000) {
            roundValue = Math.round(largeValue / 100) / 10;
            return roundValue + "k";
        }

        roundValue = Math.round(largeValue);
        return roundValue + "";
    }

    public static addDays(date: Date, days: number): Date {
        date.setDate(date.getDate() + days);
        return date;
    }
}
ts

import { IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';
import { CategoryChartSharedData } from './CategoryChartSharedData';

ModuleManager.register(IgcCategoryChartModule);

export class CategoryChartHighVolume {

    private chart: IgcCategoryChartComponent;
    public dataPoints: number = 500000;

    public dataInfo: string = CategoryChartSharedData.toShortString(this.dataPoints);
    public data: any[] = [];
    private dataInfoLabel: HTMLLabelElement;

    constructor() {

        this.onDataPointsChanged = this.onDataPointsChanged.bind(this);
        this.onDataGenerateClick = this.onDataGenerateClick.bind(this);

        this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
        this.chart.dataSource = CategoryChartSharedData.generateItems(0, this.dataPoints, true);

        let slider1 = document.getElementById('dataPointsSlider') as HTMLInputElement;
        slider1!.addEventListener('change', this.onDataPointsChanged);

        let DataGenerate1 = document.getElementById('DataGenerate') as HTMLButtonElement;
        DataGenerate1!.addEventListener('click', this.onDataGenerateClick);
    }

    public onDataPointsChanged = (e: any) => {
        this.dataPoints = e.target.value;
        const info = CategoryChartSharedData.toShortString(this.dataPoints);
        this.dataPoints = this.dataPoints;
        this.dataInfo = info;

        this.dataInfoLabel = document.getElementById('dataInfoLabel') as HTMLLabelElement;
        this.dataInfoLabel.textContent = this.dataPoints.toString();
    }

    public onDataGenerateClick = (e: any) => {
        if (this.dataPoints === undefined) {
            this.dataPoints = 10000;
        }
        this.generateData();
    }

    public generateData() {
        this.chart.dataSource = CategoryChartSharedData.generateItems(0, this.dataPoints, true);
    }
}

new CategoryChartHighVolume();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>CategoryChartHighVolume</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">
        <label class="options-label">Data Points: </label>
        <label class="options-value" id="dataInfoLabel"> 500000 </label>
        <input id="dataPointsSlider" class="options-slider" type="range" min="10000" max="1000000" step="1000"
            value=500000 />
        <button id="DataGenerate">Generate Data</button>
    </div>
    <igc-category-chart id="chart"
        width="100%"
        height="calc(100% - 3rem)"
        chart-type="Line"
        tool-tip-type="Default"
        y-axis-extent="60"
        x-axis-enhanced-interval-prefer-more-category-labels="false"
        should-consider-auto-rotation-for-initial-labels="false"
        should-auto-expand-margin-for-initial-labels="false"
        crosshairs-display-mode="None"
        auto-margin-and-angle-update-mode="None"
        marker-types="None" >
    </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

툴팁

도구 설명을 통해 특정 시리즈 유형과 관련된 모든 정보를 표시합니다. 항목 수준 및 범주 수준 도구 설명과 같이 활성화할 수 있는 다양한 도구 설명이 있습니다. 차트 도구 설명 항목에서 이 기능에 대해 자세히 알아볼 수 있습니다.

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

추세선

추세선을 사용하여 추세를 식별하거나 데이터에서 패턴을 찾을 수 있습니다. Web Components 차트에서 지원하는 다양한 추세선(예: CubicFit 및 LinearFit)이 있습니다. 이 기능에 대한 자세한 내용은 차트 추세선 항목에서 확인할 수 있습니다.



export class StocksHistory {
  /** gets stock OHLC prices for multiple stocks */

  public static async getMultipleStocks(): Promise<any[]> {
    // getting prices of multiples stocks asynchronously
    const dataSources: any[] = [
      //await this.getAmazonStock(),
      await this.getGoogleStock(),
      await this.getMicrosoftStock(),
      //await this.getTeslaStock()
    ];

    return new Promise<any[]>((resolve, reject) => {
      resolve(dataSources);
    });
  }

  /** gets Amazon stock OHLC prices from a .JSON file */
  public static async getAmazonStock(): Promise<StockItem[]> {
    let url = "https://static.infragistics.com/xplatform/data/stocks/stockAmazon.json";
    let response = await fetch(url);
    let jsonData = await response.json();
    let stockData = this.convertData(jsonData);
    // setting data intent for Series Title, e.g. FinancialChart usage
    (stockData as any).__dataIntents = {
      close: ["SeriesTitle/Amazon"]
    };
    // console.log("fetchAmazonStock: ", stockData.length);

    return new Promise<StockItem[]>((resolve, reject) => {
      resolve(stockData);
    });
  }

  /** gets Tesla stock OHLC prices from a .JSON file */
  public static async getTeslaStock(): Promise<StockItem[]> {
    let url = "https://static.infragistics.com/xplatform/data/stocks/stockTesla.json";
    let response = await fetch(url);
    let jsonData = await response.json();
    let stockData = this.convertData(jsonData);
    // setting data intent for Series Title, e.g. FinancialChart usage
    (stockData as any).__dataIntents = {
      close: ["SeriesTitle/Tesla"]
    };
    return new Promise<StockItem[]>((resolve, reject) => {
      resolve(stockData);
    });
  }

  /** gets Microsoft stock OHLC prices from a .JSON file */
  public static async getMicrosoftStock(): Promise<StockItem[]> {
    let url = "https://static.infragistics.com/xplatform/data/stocks/stockMicrosoft.json";
    let response = await fetch(url);
    let jsonData = await response.json();
    let stockData = this.convertData(jsonData);
    // setting data intent for Series Title, e.g. FinancialChart usage
    (stockData as any).__dataIntents = {
      close: ["SeriesTitle/Microsoft"]
    };
    return new Promise<StockItem[]>((resolve, reject) => {
      resolve(stockData);
    });
  }

  /** gets Google stock OHLC prices from a .JSON file */
  public static async getGoogleStock(): Promise<StockItem[]> {
    let url = "https://static.infragistics.com/xplatform/data/stocks/stockGoogle.json";
    let response = await fetch(url);
    let jsonData = await response.json();
    let stockData = this.convertData(jsonData);
    // setting data intent for Series Title, e.g. FinancialChart usage
    (stockData as any).__dataIntents = {
      close: ["SeriesTitle/Google"]
    };
    return new Promise<StockItem[]>((resolve, reject) => {
      resolve(stockData);
    });
  }

  public static convertData(jsonData: any[]): StockItem[] {
    let stockItems: StockItem[] = [];

    for (let json of jsonData) {
      let parts = json.date.split("-"); // "2020-01-01"
      let item = new StockItem();
      item.date = new Date(parts[0], parts[1], parts[2]);
      item.open = json.open;
      item.high = json.high;
      item.low = json.low;
      item.close = json.close;
      item.volume = json.volume;
      stockItems.push(item);

    }

    return stockItems;
  }
}

export class StockItem {
  public open?: number;
  public close?: number;
  public high?: number;
  public low?: number;
  public volume?: number;

  public date?: Date;

}
ts

import { IgcFinancialChartModule } from 'igniteui-webcomponents-charts';
import { IgcFinancialChartComponent } from 'igniteui-webcomponents-charts';
import { TrendLineType } from 'igniteui-webcomponents-core';
import { ModuleManager } from 'igniteui-webcomponents-core';
import { StocksHistory } from './StocksHistory';

ModuleManager.register(IgcFinancialChartModule);

export class FinancialChartTrendlines {

    private chart: IgcFinancialChartComponent;
    public trendLineType: TrendLineType = TrendLineType.QuinticFit;

    constructor() {

        this.chart = document.getElementById('chart') as IgcFinancialChartComponent;
        this.chart.trendLineType = this.trendLineType;

        let trendLineSelect = document.getElementById('trendLineSelect');
        trendLineSelect!.addEventListener('change', this.onTrendlineChanged);

        StocksHistory.getMicrosoftStock().then((stocks: any[]) => {
            this.chart.dataSource = stocks;
        });
    }

    public onTrendlineChanged = (e: any) => {
        const type = e.target.value;
        switch (type) {
            case 'CubicFit':
                this.trendLineType = TrendLineType.CubicFit;
            break;
            case 'LinearFit':
                this.trendLineType = TrendLineType.LinearFit;
            break;
            case 'QuinticFit':
                this.trendLineType = TrendLineType.QuinticFit;
            break;
            case 'QuarticFit':
                this.trendLineType = TrendLineType.QuarticFit;
            break;
            case 'ExponentialFit':
                this.trendLineType = TrendLineType.ExponentialFit;
            break;
            case 'PowerLawFit':
                this.trendLineType = TrendLineType.PowerLawFit;
            break;
            case 'LogarithmicFit':
                this.trendLineType = TrendLineType.LogarithmicFit;
            break;
            case 'CumulativeAverage':
                this.trendLineType = TrendLineType.CumulativeAverage;
            break;
            case 'ExponentialAverage':
                this.trendLineType = TrendLineType.ExponentialAverage;
            break;
            case 'SimpleAverage':
                this.trendLineType = TrendLineType.SimpleAverage;
            break;
            case 'ModifiedAverage':
                this.trendLineType = TrendLineType.ModifiedAverage;
            break;
            case 'WeightedAverage':
                this.trendLineType = TrendLineType.WeightedAverage;
            break;
            case 'None':
                this.trendLineType = TrendLineType.None;
            break;
        }
        this.chart.trendLineType = this.trendLineType;
    }
}

new FinancialChartTrendlines();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>FinancialChartTrendlines</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">
        <label class="options-label">Trendline Type:</label>
        <select id="trendLineSelect">
            <option>QuinticFit</option>
            <option>CubicFit</option>
            <option>LinearFit</option>
            <option>QuarticFit</option>
            <option>ExponentialFit</option>
            <option>PowerLawFit</option>
            <option>LogarithmicFit</option>
            <option>CumulativeAverage</option>
            <option>ExponentialAverage</option>
            <option>SimpleAverage</option>
            <option>ModifiedAverage</option>
            <option>WeightedAverage</option>
            <option>None</option>
        </select>
    </div>

    <div class="container" style="height: calc(100% - 3rem)">
        <igc-financial-chart id="chart" width="100%" height="100%"
            chart-type="Bar"
            thickness="2"
            trend-line-thickness="2"
            trend-line-period="10"
            trend-line-brushes="rgba(0, 101, 209, 1)"
            chart-title="Microsoft Trend"
            subtitle="Between 2013 and 2017"
            zoom-slider-type="None"
            is-horizontal-zoom-enabled="false"
            is-vertical-zoom-enabled="false"
            >
        </igc-financial-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

Web Components 차트 기능

중심선

주석

애니메이션

강조

마커

항해

오버레이

성능

툴팁

추세선

API 참조