Líneas de cuadrícula de Web Components eje

Todos los gráficos Ignite UI for Web Components incluyen la capacidad incorporada para modificar la apariencia de las líneas de los ejes, así como la frecuencia de las líneas de cuadrícula principales/menores y las marcas de verificación que se representan en los ejes X e Y.

Los siguientes ejemplos se pueden aplicar a los controles IgcCategoryChartComponent así como a IgcFinancialChartComponent.

Las líneas de cuadrícula del eje principal son líneas largas que se extienden horizontalmente a lo largo del eje Y o verticalmente a lo largo del eje X desde las ubicaciones de las etiquetas de los ejes y se representan en el área de trazado del gráfico. Las líneas de cuadrícula del eje menor son líneas que se representan entre las líneas de cuadrícula del eje mayor.

Las marcas de graduación de los ejes se muestran a lo largo de todos los ejes horizontales y verticales de cada etiqueta en todas las posiciones de línea principales del gráfico de Web Components.

Ejemplo de líneas de cuadrícula de Web Components ejes

Este ejemplo muestra cómo configurar la línea de cuadrícula del eje para mostrar líneas de cuadrícula mayores y menores en intervalos específicos:

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

¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

Propiedades de las líneas de cuadrícula del eje Web Components

Establecer la propiedad de intervalo de eje especifica con qué frecuencia se representan las principales líneas de cuadrícula y etiquetas de eje en un eje. De manera similar, la propiedad de intervalo menor del eje especifica con qué frecuencia se representan las líneas de cuadrícula menores en un eje.

Para mostrar líneas de cuadrícula menores que corresponden a intervalos menores, debe configurar las propiedades xAxisMinorStroke y xAxisMinorStrokeThickness en el eje. Esto se debe a que las líneas de cuadrícula menores no tienen un color o grosor predeterminado y no se mostrarán sin asignarlas primero.

Puede personalizar la forma en que se muestran las líneas de cuadrícula en el gráfico de Web Components estableciendo las siguientes propiedades:

Imágenes del eje	Tipo	Nombres de propiedades	Descripción
Color de trazo principal	cadena	xAxisMajorStroke yAxisMajorStroke	Estas propiedades establecen el color de las líneas de cuadrícula del eje principal.
Color de trazo menor	cadena	xAxisMinorStroke yAxisMinorStroke	Estas propiedades establecen el color de las líneas de cuadrícula del eje menor.
Grosor del trazo mayor	número	xAxisMajorStrokeThickness yAxisMajorStrokeThickness	Estas propiedades establecen el grosor en píxeles de las líneas de cuadrícula del eje principal.
Grosor del trazo menor	número	xAxisMinorStrokeThickness yAxisMinorStrokeThickness	Estas propiedades establecen el grosor en píxeles de las líneas de cuadrícula del eje menor.
Intervalo mayor	número	xAxisInterval yAxisInterval	Estas propiedades establecen el intervalo entre las líneas de cuadrícula y las etiquetas del eje principal.
Intervalo menor	número	xAxisMinorInterval yAxisMinorInterval	Estas propiedades establecen el intervalo entre las líneas de cuadrícula menores del eje, si se utilizan.
Color del trazo de la línea del eje	cadena	xAxisStroke yAxisStroke	Estas propiedades establecen el color de una línea de eje.
Grosor del trazo del eje	número	xAxisStrokeThickness yAxisStrokeThickness	Estas propiedades establecen el grosor en píxeles de una línea de eje.

Con respecto al intervalo mayor y menor en la tabla anterior, es importante tener en cuenta que el intervalo mayor para las etiquetas de los ejes también se establecerá según este valor, mostrando una etiqueta en el punto del eje asociado con el intervalo. Las líneas de la cuadrícula del intervalo menor siempre se representan entre las líneas de la cuadrícula principal y, como tal, las propiedades del intervalo menor siempre deben establecerse en algo mucho más pequeño (generalmente entre 2 y 5 veces más pequeño) que el valor de las propiedades del intervalo mayor.

En los ejes de categorías, los intervalos se representan como un índice entre el primer elemento y el último elemento de categoría. Generalmente, este valor debe ser igual al 10-20% del número total de elementos de categoría para el intervalo principal, de modo que todas las etiquetas de los ejes encajen en el eje y no queden recortadas por otras etiquetas de ejes. Para intervalos menores, esto se representa como una fracción de las propiedades del intervalo mayor. Este valor generalmente debe estar entre 0,25 y 0,5.

En los ejes numéricos, los valores del intervalo se representan como un doble entre el valor mínimo del eje y el valor máximo del eje. De forma predeterminada, los ejes numéricos calcularán automáticamente y encontrarán un intervalo agradable y redondo basado en los valores mínimos y máximos del eje.

En los ejes de fecha y hora, este valor se representa como un lapso de tiempo entre el valor mínimo del eje y el valor máximo del eje.

El siguiente ejemplo demuestra cómo personalizar las líneas de la cuadrícula configurando las propiedades anteriores:

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

Los ejes de IgcDataChartComponent también tienen la capacidad de colocar una matriz de guiones en las líneas de cuadrícula mayor y menor utilizando las propiedades majorStrokeDashArray y minorStrokeDashArray, respectivamente. La línea del eje real también puede ser discontinua configurando la propiedad strokeDashArray del eje correspondiente. Estas propiedades toman una serie de números que describirán la longitud de los guiones de las líneas de cuadrícula correspondientes.

El siguiente ejemplo demuestra un IgcDataChartComponent con las propiedades de matriz de guiones establecidas anteriormente:

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

Ejemplo de marcas de Web Components eje

Las marcas de graduación del eje se habilitan estableciendo las propiedades xAxisTickLength y yAxisTickLength en un valor mayor que 0. Estas propiedades especifican la longitud de los segmentos de línea que forman las marcas de graduación.

Las marcas de graduación siempre se extienden desde la línea del eje y apuntan a la dirección de las etiquetas. Las etiquetas están compensadas por el valor de la longitud de las marcas para evitar superposiciones. Por ejemplo, con la propiedad yAxisTickLength establecida en 5, las etiquetas de los ejes se desplazarán hacia la izquierda en esa cantidad.

El siguiente ejemplo demuestra cómo personalizar las marcas configurando las propiedades anteriores:

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

Propiedades de las marcas de graduación del eje Web Components

Puede personalizar la forma en que se muestran las marcas de graduación del eje en nuestros chats de Web Components configurando las siguientes propiedades:

Imágenes del eje	Tipo	Nombres de propiedades	Descripción
Color de trazo de marca	cadena	xAxisTickStroke yAxisTickStroke	Estas propiedades establecen el color de las marcas.
Grosor del trazo de garrapata	número	xAxisTickStrokeThickness yAxisTickStrokeThickness	Estas propiedades establecen el grosor de las marcas de los ejes.
Longitud del trazo de garrapata	número	xAxisTickLength yAxisTickLength	Estas propiedades establecen la longitud de las marcas de graduación del eje.

Recursos adicionales

Puede encontrar más información sobre las funciones de gráficos relacionadas en estos temas:

• Diseño de eje
• Opciones de eje

Referencias de API

La siguiente es una lista de miembros de API mencionados en las secciones anteriores:

IgcDataChartComponent	IgcCategoryChartComponentoIgcFinancialChartComponent
Axes ➔ IgcNumericXAxisComponent ➔ interval	xAxisInterval(Intervalo mayor)
Axes ➔ IgcNumericYAxisComponent ➔ interval	yAxisInterval(Intervalo mayor)
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(Color de línea del eje)
Axes ➔ IgcNumericYAxisComponent ➔ stroke	yAxisStroke(Color de línea del eje)
Axes ➔ IgcNumericXAxisComponent ➔ tickLength	xAxisTickLength
Axes ➔ IgcNumericYAxisComponent ➔ tickLength	yAxisTickLength
Axes ➔ IgcNumericXAxisComponent ➔ tickStroke	xAxisTickStroke
Axes ➔ IgcNumericYAxisComponent ➔ tickStroke	yAxisTickStroke
Axes ➔ IgcNumericXAxisComponent ➔ strip	xAxisStrip(Espacio entre líneas de cuadrícula principales)
Axes ➔ IgcNumericYAxisComponent ➔ strip	yAxisStrip(Espacio entre líneas de cuadrícula principales)