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	これらのプロパティは、軸線のピクセル単位の太さを設定します。

上記のテーブルの主間隔と副間隔については、軸ラベルの主間隔も、この値によって設定され、間隔に関連付けられた軸のポイントにラベルが 1 つ表示されることに注意してください。副間隔グリッド線は常に主グリッド線の間に描画されるため、副間隔プロパティは常に主間隔プロパティの値よりもはるかに小さい値 (通常は 2〜5 倍小さい値) に設定する必要があります。

カテゴリ軸では、間隔は、最初の項目から最後のカテゴリ項目の範囲のインデックスとして表されます。通常、この値は、主間隔のカテゴリ項目の合計数の 10～20% に相当します。その結果、すべての軸ラベルは軸にフィットし、他の軸ラベルによって切り取られることはありません。副間隔の場合、主間隔プロパティの一部として表されます。通常、この値の範囲は 0.25～0.5 です。

数値軸では、間隔値は軸の最小値と最大値の間の double 値として表されます。数値軸はデフォルトで、軸の最小値および最大値から四捨五入されたバランスの良い数値に、自動的に計算されます。

日付/時刻軸では、この値は軸の最小値から最大値の範囲の時間間隔として表されます。

以下の例は、上記のプロパティを設定してグリッド線をカスタマイズする方法を示しています。

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 (軸の主グリッド線の空間)