Web Components 축 그리드 라인

모든 Ignite UI for Web Components 차트에는 X축 및 Y축에서 렌더링되는 주/보조 눈금선 및 눈금 표시의 빈도뿐만 아니라 축 선의 모양을 수정할 수 있는 기본 제공 기능이 포함되어 있습니다.

다음 예는 IgcCategoryChartComponent 및 IgcFinancialChartComponent 컨트롤에 적용될 수 있습니다.

축 주요 눈금선은 축 레이블 위치에서 Y축을 따라 수평으로 또는 X축을 따라 수직으로 확장되는 긴 선이며 차트의 그림 영역을 통해 렌더링됩니다. 축 보조 격자선은 축 주요 격자선 사이에 렌더링되는 선입니다.

축 눈금은 각 레이블의 모든 가로 및 세로 축을 따라 Web Components 차트의 모든 주 선 위치에 표시됩니다.

Web Components 축 그리드 라인 예

이 예에서는 지정된 간격으로 주요 격자선과 보조 격자선을 표시하도록 축 격자선을 구성하는 방법을 보여줍니다.

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 { IgcLegendModule, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
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 legend: IgcLegendComponent
    private propertyEditorPanel1: IgcPropertyEditorPanelComponent
    private xAxisStroke: IgcPropertyEditorPropertyDescriptionComponent
    private xAxisMajorStroke: IgcPropertyEditorPropertyDescriptionComponent
    private yAxisStroke: IgcPropertyEditorPropertyDescriptionComponent
    private yAxisMajorStroke: IgcPropertyEditorPropertyDescriptionComponent
    private yAxisMinorStroke: IgcPropertyEditorPropertyDescriptionComponent
    private chart: IgcCategoryChartComponent
    private _bind: () => void;

    constructor() {
        var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
        var propertyEditorPanel1 = this.propertyEditorPanel1 = document.getElementById('propertyEditorPanel1') as IgcPropertyEditorPanelComponent;
        var xAxisStroke = this.xAxisStroke = document.getElementById('XAxisStroke') as IgcPropertyEditorPropertyDescriptionComponent;
        var xAxisMajorStroke = this.xAxisMajorStroke = document.getElementById('XAxisMajorStroke') as IgcPropertyEditorPropertyDescriptionComponent;
        var yAxisStroke = this.yAxisStroke = document.getElementById('YAxisStroke') as IgcPropertyEditorPropertyDescriptionComponent;
        var yAxisMajorStroke = this.yAxisMajorStroke = document.getElementById('YAxisMajorStroke') as IgcPropertyEditorPropertyDescriptionComponent;
        var yAxisMinorStroke = this.yAxisMinorStroke = document.getElementById('YAxisMinorStroke') as IgcPropertyEditorPropertyDescriptionComponent;
        var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;

        this._bind = () => {
            propertyEditorPanel1.componentRenderer = this.renderer;
            propertyEditorPanel1.target = this.chart;
            chart.dataSource = this.countryRenewableElectricity;
            chart.legend = this.legend;
        }
        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);
            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

        description-type="CategoryChart"
        is-horizontal="true"
        is-wrapping-enabled="true"
        name="propertyEditorPanel1"
        id="propertyEditorPanel1">
            <igc-property-editor-property-description
            property-path="XAxisStroke"
            name="XAxisStroke"
            id="XAxisStroke"
            label="X Axis Stroke"
            should-override-default-editor="true"
            value-type="EnumValue"
            drop-down-names="gray, darkslategray, salmon, cornflowerblue, darkgreen"
            drop-down-values="gray, darkslategray, salmon, cornflowerblue, darkgreen"
            primitive-value="gray">
            </igc-property-editor-property-description>
            <igc-property-editor-property-description
            property-path="XAxisMajorStroke"
            name="XAxisMajorStroke"
            id="XAxisMajorStroke"
            label="X Axis Major Stroke"
            should-override-default-editor="true"
            value-type="EnumValue"
            drop-down-names="gray, darkslategray, salmon, cornflowerblue, darkgreen"
            drop-down-values="gray, darkslategray, salmon, cornflowerblue, darkgreen"
            primitive-value="darkslategray">
            </igc-property-editor-property-description>
            <igc-property-editor-property-description
            property-path="YAxisStroke"
            name="YAxisStroke"
            id="YAxisStroke"
            label="Y Axis Stroke"
            should-override-default-editor="true"
            value-type="EnumValue"
            drop-down-names="gray, darkslategray, salmon, cornflowerblue, darkgreen"
            drop-down-values="gray, darkslategray, salmon, cornflowerblue, darkgreen"
            primitive-value="gray">
            </igc-property-editor-property-description>
            <igc-property-editor-property-description
            property-path="YAxisMajorStroke"
            name="YAxisMajorStroke"
            id="YAxisMajorStroke"
            label="Y Axis Major Stroke"
            should-override-default-editor="true"
            value-type="EnumValue"
            drop-down-names="gray, darkslategray, salmon, cornflowerblue, darkgreen"
            drop-down-values="gray, darkslategray, salmon, cornflowerblue, darkgreen"
            primitive-value="darkslategray">
            </igc-property-editor-property-description>
            <igc-property-editor-property-description
            property-path="YAxisMinorStroke"
            name="YAxisMinorStroke"
            id="YAxisMinorStroke"
            label="Y Axis Minor Stroke"
            should-override-default-editor="true"
            value-type="EnumValue"
            drop-down-names="gray, darkslategray, salmon, cornflowerblue, darkgreen"
            drop-down-values="gray, darkslategray, salmon, cornflowerblue, darkgreen"
            primitive-value="gray">
            </igc-property-editor-property-description>
        </igc-property-editor-panel>
    </div>

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

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

    <div class="container fill">
        <igc-category-chart
        name="chart"
        id="chart"
        computed-plot-area-margin-mode="Series"
        included-properties="year, europe, china, america"
        chart-type="Line"
        is-horizontal-zoom-enabled="false"
        is-vertical-zoom-enabled="false"
        x-axis-stroke="rgba(145, 145, 145, 1)"
        x-axis-stroke-thickness="2"
        x-axis-interval="1"
        x-axis-major-stroke="rgba(71, 71, 71, 1)"
        x-axis-major-stroke-thickness="0.5"
        y-axis-stroke="gray"
        y-axis-stroke-thickness="2"
        y-axis-interval="20"
        y-axis-major-stroke="darkslategray"
        y-axis-major-stroke-thickness="1"
        y-axis-minor-interval="5"
        y-axis-minor-stroke="gray"
        y-axis-minor-stroke-thickness="0.5"
        thickness="2">
        </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 축 격자선 속성

축 간격 속성을 설정하면 주요 눈금선과 축 레이블이 축에 렌더링되는 빈도를 지정합니다. 마찬가지로 축 보조 간격 속성은 축에서 보조 격자선이 렌더링되는 빈도를 지정합니다.

보조 간격에 해당하는 보조 격자선을 표시하려면 축에 xAxisMinorStroke 및 xAxisMinorStrokeThickness 속성을 설정해야 합니다. 보조 눈금선에는 기본 색상이나 두께가 없으며 먼저 지정하지 않으면 표시되지 않기 때문입니다.

다음 속성을 설정하여 Web Components 차트에 눈금선이 표시되는 방식을 사용자 지정할 수 있습니다.

축 비주얼	유형	속성 이름	설명
주요 획 색상	끈	xAxisMajorStroke yAxisMajorStroke	이러한 속성은 축 주요 눈금선의 색상을 설정합니다.
보조 획 색상	끈	xAxisMinorStroke yAxisMinorStroke	이러한 속성은 축 보조 격자선의 색상을 설정합니다.
주요 스트로크 두께	숫자	xAxisMajorStrokeThickness yAxisMajorStrokeThickness	이러한 속성은 축 주요 격자선의 두께를 픽셀 단위로 설정합니다.
작은 스트로크 두께	숫자	xAxisMinorStrokeThickness yAxisMinorStrokeThickness	이러한 속성은 축 보조 격자선의 두께를 픽셀 단위로 설정합니다.
주요 간격	숫자	xAxisInterval yAxisInterval	이러한 속성은 축 주요 눈금선과 레이블 사이의 간격을 설정합니다.
마이너 간격	숫자	xAxisMinorInterval yAxisMinorInterval	이러한 속성은 사용되는 경우 축 보조 격자선 사이의 간격을 설정합니다.
축 선 획 색상	끈	xAxisStroke yAxisStroke	이 속성은 축 선의 색상을 설정합니다.
축 스트로크 두께	숫자	xAxisStrokeThickness yAxisStrokeThickness	이러한 속성은 축 선의 두께를 픽셀 단위로 설정합니다.

위 표의 주요 및 보조 간격과 관련하여 축 레이블의 주요 간격도 이 값으로 설정되어 간격과 관련된 축의 지점에 하나의 레이블이 표시된다는 점에 유의하는 것이 중요합니다. 보조 간격 눈금선은 항상 주요 눈금선 사이에 렌더링되므로 보조 간격 속성은 항상 주요 간격 속성 값보다 훨씬 작은 값(보통 2-5배 작은 값)으로 설정되어야 합니다.

범주 축에서 간격은 첫 번째 항목과 마지막 범주 항목 사이의 인덱스로 표시됩니다. 일반적으로 이 값은 모든 축 레이블이 다른 축 레이블에 의해 잘리지 않도록 모든 축 레이블이 축에 맞도록 주요 간격에 대한 총 범주 항목 수의 10-20%와 같아야 합니다. 작은 간격의 경우 이는 주요 간격 속성의 일부로 표시됩니다. 이 값은 일반적으로 0.25에서 0.5 사이여야 합니다.

숫자 축에서는 간격 값이 축 최소값과 축 최대 값 사이의 이중으로 표시됩니다. 기본적으로 숫자 축은 축 최소값과 최대값을 기반으로 근사하고 둥근 간격을 자동으로 계산하고 찾습니다.

날짜 시간 축에서 이 값은 축 최소값과 축 최대값 사이의 시간 범위로 표시됩니다.

다음 예에서는 위의 속성을 설정하여 눈금선을 사용자 정의하는 방법을 보여줍니다.

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 { IgcLegendModule, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
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 legend: IgcLegendComponent
    private propertyEditorPanel1: IgcPropertyEditorPanelComponent
    private xAxisStroke: IgcPropertyEditorPropertyDescriptionComponent
    private xAxisMajorStroke: IgcPropertyEditorPropertyDescriptionComponent
    private yAxisStroke: IgcPropertyEditorPropertyDescriptionComponent
    private yAxisMajorStroke: IgcPropertyEditorPropertyDescriptionComponent
    private yAxisMinorStroke: IgcPropertyEditorPropertyDescriptionComponent
    private chart: IgcCategoryChartComponent
    private _bind: () => void;

    constructor() {
        var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
        var propertyEditorPanel1 = this.propertyEditorPanel1 = document.getElementById('propertyEditorPanel1') as IgcPropertyEditorPanelComponent;
        var xAxisStroke = this.xAxisStroke = document.getElementById('XAxisStroke') as IgcPropertyEditorPropertyDescriptionComponent;
        var xAxisMajorStroke = this.xAxisMajorStroke = document.getElementById('XAxisMajorStroke') as IgcPropertyEditorPropertyDescriptionComponent;
        var yAxisStroke = this.yAxisStroke = document.getElementById('YAxisStroke') as IgcPropertyEditorPropertyDescriptionComponent;
        var yAxisMajorStroke = this.yAxisMajorStroke = document.getElementById('YAxisMajorStroke') as IgcPropertyEditorPropertyDescriptionComponent;
        var yAxisMinorStroke = this.yAxisMinorStroke = document.getElementById('YAxisMinorStroke') as IgcPropertyEditorPropertyDescriptionComponent;
        var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;

        this._bind = () => {
            propertyEditorPanel1.componentRenderer = this.renderer;
            propertyEditorPanel1.target = this.chart;
            chart.dataSource = this.countryRenewableElectricity;
            chart.legend = this.legend;
        }
        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);
            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

        description-type="CategoryChart"
        is-horizontal="true"
        is-wrapping-enabled="true"
        name="propertyEditorPanel1"
        id="propertyEditorPanel1">
            <igc-property-editor-property-description
            property-path="XAxisStroke"
            name="XAxisStroke"
            id="XAxisStroke"
            label="X Axis Stroke"
            should-override-default-editor="true"
            value-type="EnumValue"
            drop-down-names="gray, darkslategray, salmon, cornflowerblue, darkgreen"
            drop-down-values="gray, darkslategray, salmon, cornflowerblue, darkgreen"
            primitive-value="gray">
            </igc-property-editor-property-description>
            <igc-property-editor-property-description
            property-path="XAxisMajorStroke"
            name="XAxisMajorStroke"
            id="XAxisMajorStroke"
            label="X Axis Major Stroke"
            should-override-default-editor="true"
            value-type="EnumValue"
            drop-down-names="gray, darkslategray, salmon, cornflowerblue, darkgreen"
            drop-down-values="gray, darkslategray, salmon, cornflowerblue, darkgreen"
            primitive-value="darkslategray">
            </igc-property-editor-property-description>
            <igc-property-editor-property-description
            property-path="YAxisStroke"
            name="YAxisStroke"
            id="YAxisStroke"
            label="Y Axis Stroke"
            should-override-default-editor="true"
            value-type="EnumValue"
            drop-down-names="gray, darkslategray, salmon, cornflowerblue, darkgreen"
            drop-down-values="gray, darkslategray, salmon, cornflowerblue, darkgreen"
            primitive-value="gray">
            </igc-property-editor-property-description>
            <igc-property-editor-property-description
            property-path="YAxisMajorStroke"
            name="YAxisMajorStroke"
            id="YAxisMajorStroke"
            label="Y Axis Major Stroke"
            should-override-default-editor="true"
            value-type="EnumValue"
            drop-down-names="gray, darkslategray, salmon, cornflowerblue, darkgreen"
            drop-down-values="gray, darkslategray, salmon, cornflowerblue, darkgreen"
            primitive-value="darkslategray">
            </igc-property-editor-property-description>
            <igc-property-editor-property-description
            property-path="YAxisMinorStroke"
            name="YAxisMinorStroke"
            id="YAxisMinorStroke"
            label="Y Axis Minor Stroke"
            should-override-default-editor="true"
            value-type="EnumValue"
            drop-down-names="gray, darkslategray, salmon, cornflowerblue, darkgreen"
            drop-down-values="gray, darkslategray, salmon, cornflowerblue, darkgreen"
            primitive-value="gray">
            </igc-property-editor-property-description>
        </igc-property-editor-panel>
    </div>

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

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

    <div class="container fill">
        <igc-category-chart
        name="chart"
        id="chart"
        computed-plot-area-margin-mode="Series"
        included-properties="year, europe, china, america"
        chart-type="Line"
        is-horizontal-zoom-enabled="false"
        is-vertical-zoom-enabled="false"
        x-axis-stroke="rgba(145, 145, 145, 1)"
        x-axis-stroke-thickness="2"
        x-axis-interval="1"
        x-axis-major-stroke="rgba(71, 71, 71, 1)"
        x-axis-major-stroke-thickness="0.5"
        y-axis-stroke="gray"
        y-axis-stroke-thickness="2"
        y-axis-interval="20"
        y-axis-major-stroke="darkslategray"
        y-axis-major-stroke-thickness="1"
        y-axis-minor-interval="5"
        y-axis-minor-stroke="gray"
        y-axis-minor-stroke-thickness="0.5"
        thickness="2">
        </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

​IgcDataChartComponent의 축에는 majorStrokeDashArray 및 minorStrokeDashArray 선에 대시 배열을 배치하는 기능도 있습니다. 해당 축의 strokeDashArray 속성을 설정하여 실제 축 선도 점선으로 표시할 수 있습니다. 이러한 속성은 해당 그리드 선의 대시 길이를 설명하는 숫자 배열을 사용합니다.

다음 예에서는 위의 대시 배열 속성이 설정된 IgcDataChartComponent 보여줍니다.

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, items)));
        }
    }
}
tsコピー

import { IgcLegendModule, IgcDataChartCategoryModule, IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcLineSeriesComponent } from 'igniteui-webcomponents-charts';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";

ModuleManager.register(
    IgcLegendModule,
    IgcDataChartCategoryModule,
    IgcDataChartInteractivityModule
);

export class Sample {

    private legend: IgcLegendComponent
    private chart: IgcDataChartComponent
    private xAxis: IgcCategoryXAxisComponent
    private yAxis: IgcNumericYAxisComponent
    private lineSeries1: IgcLineSeriesComponent
    private lineSeries2: IgcLineSeriesComponent
    private lineSeries3: IgcLineSeriesComponent
    private _bind: () => void;

    constructor() {
        var legend = this.legend = document.getElementById('Legend') as IgcLegendComponent;
        var chart = this.chart = document.getElementById('chart') as IgcDataChartComponent;
        var xAxis = this.xAxis = document.getElementById('xAxis') as IgcCategoryXAxisComponent;
        var yAxis = this.yAxis = document.getElementById('yAxis') as IgcNumericYAxisComponent;
        var lineSeries1 = this.lineSeries1 = document.getElementById('LineSeries1') as IgcLineSeriesComponent;
        var lineSeries2 = this.lineSeries2 = document.getElementById('LineSeries2') as IgcLineSeriesComponent;
        var lineSeries3 = this.lineSeries3 = document.getElementById('LineSeries3') as IgcLineSeriesComponent;

        this._bind = () => {
            chart.legend = this.legend;
            xAxis.dataSource = this.countryRenewableElectricity;
            lineSeries1.xAxis = this.xAxis;
            lineSeries1.yAxis = this.yAxis;
            lineSeries1.dataSource = this.countryRenewableElectricity;
            lineSeries2.xAxis = this.xAxis;
            lineSeries2.yAxis = this.yAxis;
            lineSeries2.dataSource = this.countryRenewableElectricity;
            lineSeries3.xAxis = this.xAxis;
            lineSeries3.yAxis = this.yAxis;
            lineSeries3.dataSource = this.countryRenewableElectricity;
        }
        this._bind();
    }

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

}

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="legend-title">
        Renewable Electricity Generated
    </div>

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

    <div class="container fill">
        <igc-data-chart
        name="chart"
        id="chart"
        computed-plot-area-margin-mode="Series">
            <igc-category-x-axis
            name="xAxis"
            id="xAxis"
            label="year"
            interval="1"
            major-stroke="rgba(71, 71, 71, 1)"
            major-stroke-thickness="0.5"
            stroke="rgba(145, 145, 145, 1)"
            stroke-thickness="2"
            stroke-dash-array="5, 5"
            major-stroke-dash-array="5, 5"
            tick-length="0">
            </igc-category-x-axis>
            <igc-numeric-y-axis
            name="yAxis"
            id="yAxis"
            stroke="gray"
            stroke-thickness="2"
            interval="20"
            major-stroke="darkslategray"
            major-stroke-thickness="1"
            minor-interval="5"
            minor-stroke="gray"
            minor-stroke-thickness="0.5"
            stroke-dash-array="5, 5"
            major-stroke-dash-array="5, 5"
            minor-stroke-dash-array="2.5, 2.5"
            tick-length="0">
            </igc-numeric-y-axis>
            <igc-line-series
            name="LineSeries1"
            id="LineSeries1"
            title="Europe"
            marker-type="Circle"
            value-member-path="europe"
            show-default-tooltip="true">
            </igc-line-series>
            <igc-line-series
            name="LineSeries2"
            id="LineSeries2"
            title="China"
            marker-type="Circle"
            value-member-path="china"
            show-default-tooltip="true">
            </igc-line-series>
            <igc-line-series
            name="LineSeries3"
            id="LineSeries3"
            title="America"
            marker-type="Circle"
            value-member-path="america"
            show-default-tooltip="true">
            </igc-line-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コピー

Edit in: Codesandbox

Web Components 축 눈금 표시 예

축 눈금 표시는 xAxisTickLength 및 yAxisTickLength 속성을 0보다 큰 값으로 설정하여 활성화됩니다. 이러한 속성은 눈금 표시를 형성하는 선 세그먼트의 길이를 지정합니다.

눈금 표시는 항상 축선에서 확장되어 레이블 방향을 가리킵니다. 레이블은 겹치는 것을 방지하기 위해 눈금 길이 값만큼 오프셋됩니다. 예를 들어, yAxisTickLength 속성이 5로 설정되면 축 레이블이 해당 양만큼 왼쪽으로 이동됩니다.

다음 예에서는 위의 속성을 설정하여 눈금 표시를 사용자 정의하는 방법을 보여줍니다.

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 { IgcLegendModule, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
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 legend: IgcLegendComponent
    private propertyEditorPanel1: IgcPropertyEditorPanelComponent
    private xAxisTickLength: IgcPropertyEditorPropertyDescriptionComponent
    private chart: IgcCategoryChartComponent
    private _bind: () => void;

    constructor() {
        var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
        var propertyEditorPanel1 = this.propertyEditorPanel1 = document.getElementById('propertyEditorPanel1') as IgcPropertyEditorPanelComponent;
        var xAxisTickLength = this.xAxisTickLength = document.getElementById('XAxisTickLength') as IgcPropertyEditorPropertyDescriptionComponent;
        var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;

        this._bind = () => {
            propertyEditorPanel1.componentRenderer = this.renderer;
            propertyEditorPanel1.target = this.chart;
            chart.dataSource = this.countryRenewableElectricity;
            chart.legend = this.legend;
        }
        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);
            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

        description-type="CategoryChart"
        is-horizontal="true"
        is-wrapping-enabled="true"
        name="propertyEditorPanel1"
        id="propertyEditorPanel1">
            <igc-property-editor-property-description
            property-path="XAxisTickLength"
            name="XAxisTickLength"
            id="XAxisTickLength"
            label="X Axis Tick Length"
            should-override-default-editor="true"
            value-type="Slider"
            min="0"
            max="20"
            primitive-value="10">
            </igc-property-editor-property-description>
        </igc-property-editor-panel>
    </div>

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

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

    <div class="container fill">
        <igc-category-chart
        name="chart"
        id="chart"
        included-properties="year, europe, china, america"
        chart-type="Line"
        computed-plot-area-margin-mode="Series"
        is-horizontal-zoom-enabled="false"
        is-vertical-zoom-enabled="false"
        x-axis-tick-length="10"
        x-axis-tick-stroke-thickness="1"
        x-axis-tick-stroke="gray"
        y-axis-tick-length="0"
        y-axis-tick-stroke-thickness="0"
        y-axis-tick-stroke="rgba(0, 0, 0, 0)">
        </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

Web Components 축 눈금 속성

다음 속성을 설정하여 축 눈금 표시가 Web Components 채팅에 표시되는 방식을 사용자 지정할 수 있습니다.

축 비주얼	유형	속성 이름	설명
틱 획 색상	끈	xAxisTickStroke yAxisTickStroke	이러한 속성은 눈금 표시의 색상을 설정합니다.
눈금 스트로크 두께	숫자	xAxisTickStrokeThickness yAxisTickStrokeThickness	이러한 속성은 축 눈금 표시의 두께를 설정합니다.
틱 스트로크 길이	숫자	xAxisTickLength yAxisTickLength	이러한 속성은 축 눈금 표시의 길이를 설정합니다.

추가 리소스

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

• 축 레이아웃
• 축 옵션

API 참조

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

IgcDataChartComponent	IgcCategoryChartComponent또는IgcFinancialChartComponent
Axes ➔ IgcNumericXAxisComponent ➔ interval	xAxisInterval(주요 간격)
Axes ➔ IgcNumericYAxisComponent ➔ interval	yAxisInterval(주요 간격)
Axes ➔ IgcNumericXAxisComponent ➔ minorInterval	xAxisMinorInterval
Axes ➔ IgcNumericYAxisComponent ➔ minorInterval	yAxisMinorInterval
Axes ➔ IgcNumericXAxisComponent ➔ majorStroke	xAxisMajorStroke
Axes ➔ IgcNumericYAxisComponent ➔ majorStroke	yAxisMajorStroke
Axes ➔ IgcNumericXAxisComponent ➔ majorStrokeThickness	xAxisMajorStrokeThickness
Axes ➔ IgcNumericYAxisComponent ➔ majorStrokeThickness	yAxisMajorStrokeThickness
Axes ➔ IgcNumericXAxisComponent ➔ minorStrokeThickness	xAxisMinorStrokeThickness
Axes ➔ IgcNumericYAxisComponent ➔ minorStrokeThickness	yAxisMinorStrokeThickness
Axes ➔ IgcNumericXAxisComponent ➔ strokeThickness	xAxisStrokeThickness
Axes ➔ IgcNumericYAxisComponent ➔ strokeThickness	yAxisStrokeThickness
Axes ➔ IgcNumericXAxisComponent ➔ stroke	xAxisStroke(축 선 색상)
Axes ➔ IgcNumericYAxisComponent ➔ stroke	yAxisStroke(축 선 색상)
Axes ➔ IgcNumericXAxisComponent ➔ tickLength	xAxisTickLength
Axes ➔ IgcNumericYAxisComponent ➔ tickLength	yAxisTickLength
Axes ➔ IgcNumericXAxisComponent ➔ tickStroke	xAxisTickStroke
Axes ➔ IgcNumericYAxisComponent ➔ tickStroke	yAxisTickStroke
Axes ➔ IgcNumericXAxisComponent ➔ strip	xAxisStrip(주요 격자선 사이의 간격)
Axes ➔ IgcNumericYAxisComponent ➔ strip	yAxisStrip(주요 격자선 사이의 간격)