Web Components 차트 마커

Ignite UI for Web Components에서 마커는 차트의 그림 영역에 있는 데이터 요소의 값을 표시하는 시각적 요소입니다. 마커는 최종 사용자가 데이터 포인트의 값이 주 그리드 선 또는 보조 그리드 선 사이에 있더라도 즉시 식별할 수 있도록 도와줍니다.

Web Components 차트 마커 예제

다음 예제에서 선형 차트는 2009년부터 2019년까지 유럽, 중국, 미국 국가의 재생 가능 전기 생성량을 MarkerType 속성을 Circle enum 값으로 설정하여 활성화된 마커와 비교합니다.

아래 샘플에서 markerBrushes 및 markerOutlines 속성을 설정하여 마커의 색상도 관리됩니다. 이 샘플에서는 드롭다운을 사용하여 마커와 chartType 구성할 수도 있습니다.

EXAMPLE

DATA

TS

HTML

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コピー

Edit in: Codesandbox

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

Web Components 차트 마커 템플릿

마커 속성 외에도 함수를 설정하여 자신만의 마커를 구현할 수 있습니다. MarkerTemplate에서 렌더링된 시리즈의 속성 IgcCategoryChartComponent 아래 예에 설명된 대로 제어합니다.

EXAMPLE

TS

HTML

CSS

import { IgcCategoryChartModule, IgcChartSeriesEventArgs, IgcCategoryChartComponent, IgcDomainChartComponent,
         IgcColumnSeriesComponent, IgcLegendModule, IgcLegendComponent } from 'igniteui-webcomponents-charts';
import { ModuleManager, DataTemplateMeasureInfo, DataTemplateRenderInfo } from 'igniteui-webcomponents-core';

ModuleManager.register(
    IgcCategoryChartModule,
    IgcLegendModule
);

export class CategoryChartMarkerTemplates {

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

    constructor() {

        this.onSeriesAdded = this.onSeriesAdded.bind(this);
        this.initData();

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

        this.chart.legend = document.getElementById("legend") as IgcLegendComponent;
    }

    public initData() {
        this.data = [
            { Location: "World", Solar: 23, Coal: -1, Hydropower: 1, Wind: 12, Nuclear: 3 },
            { Location: "China", Solar: 26, Coal: 2, Hydropower: 5, Wind: 10, Nuclear: 18 },
            { Location: "U.S.", Solar: 15, Coal: -15, Hydropower: -7, Wind: 10, Nuclear: 1 },
            { Location: "EU", Solar: 11, Coal: -12, Hydropower: -2, Wind: 14, Nuclear: -1 }
        ];
    }

    public onSeriesAdded(s: IgcDomainChartComponent, e: IgcChartSeriesEventArgs){
        let series : IgcColumnSeriesComponent = e.series as IgcColumnSeriesComponent;
        series.markerTemplate = this.getMarker();
    }

    public getMarker(): any {
        let style = { outline: "#8B5BB1", fill: "white", text: "black" };
        const size = 12;

        return {
            measure: function (measureInfo: DataTemplateMeasureInfo) {
                const context = measureInfo.context;
                const height = context.measureText("M").width;
                const width = context.measureText("0.00").width;
                measureInfo.width = width;
                measureInfo.height = height + 12;
            },
            render: function (renderInfo: DataTemplateRenderInfo) {
                let ctx = renderInfo.context;
                let x = renderInfo.xPosition;
                let y = renderInfo.yPosition;

                if (renderInfo.isHitTestRender) {
                    ctx.fillStyle = renderInfo.data.actualItemBrush.fill;

                    let width = renderInfo.availableWidth;
                    let height = renderInfo.availableHeight;

                    ctx.fillRect(x - (width / 2), y - (height), renderInfo.availableWidth, renderInfo.availableHeight);
                    return;
                }

                const dataItem = renderInfo.data.item;
                if (dataItem === null) return;

                const series = renderInfo.data.series;
                const dataPath = series.valueColumn.propertyName;

                let dataValue = 0;
                switch (dataPath) {
                    case "Solar": dataValue = dataItem.Solar; break;
                    case "Coal": dataValue = dataItem.Coal; break;
                    case "Hydropower": dataValue = dataItem.Hydropower; break;
                    case "Wind": dataValue = dataItem.Wind; break;
                    case "Nuclear": dataValue = dataItem.Nuclear; break;
                }
                ctx.font = '8pt Verdana';
                ctx.textBaseline = 'top';
                ctx.fillStyle = "black";

                let xOffset = 20;
                let yOffset = 10;
                if (dataValue < 0) {
                    ctx.fillText(dataValue + "%", x - (xOffset / 2), y + (yOffset));
                }
                else {
                    ctx.fillText(dataValue + "%", x - (xOffset / 2), y - (yOffset * 2));
                }

                ctx.strokeStyle = "black";
                ctx.fillStyle = "white";
                ctx.beginPath();
                ctx.arc(x, y, 6, 0, 2 * Math.PI);
                ctx.stroke();
                ctx.fill();
            }
        }
    }
}

new CategoryChartMarkerTemplates();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>CategoryChartMarkers</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 vertical">
    <span class="legend-title">Percentage Change in Energy Generation in 2019</span>
    <div class="legend">
      <igc-legend id="legend" orientation="horizontal"></igc-legend>
    </div>
  </div>
    <igc-category-chart id="chart"
        width="100%"
        height="calc(100% - 3rem)"
        chart-type="Column"
        thickness="2"
        is-horizontal-zoom-enabled="false"
        is-vertical-zoom-enabled="false"
        is-series-highlighting-enabled="true";
        x-axis-major-stroke-thickness="1"
        x-axis-major-stroke="LightGray"
        y-axis-minimum-value="-20"
        y-axis-maximum-value="30"
        y-axis-interval="10">
    </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

추가 리소스

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

• 차트 주석
• 차트 하이라이트

API 참조

다음은 위 섹션에서 언급된 API 멤버 목록입니다.

• markerBrushes
• markerOutlines
• MarkerType
• IgcCategoryChartComponent