Opciones de eje Angular
En todos los gráficos Ignite UI for Angular, los ejes proporcionan propiedades para configuraciones visuales como títulos, etiquetas y rangos. Estas características se muestran en los ejemplos que se proporcionan a continuación.
Ejemplo de títulos de eje
La función de títulos de los ejes de los gráficos de Angular le permite agregar información contextual a su gráfico. Puede personalizar el aspecto de los títulos de los ejes de muchas maneras diferentes, como la aplicación de diferentes estilos de fuente, colores, márgenes y alineaciones.
EXAMPLE
DATA
MODULES
TS
HTML
SCSS
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 { NgModule } from "@angular/core" ;
import { FormsModule } from "@angular/forms" ;
import { CommonModule } from "@angular/common" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import { IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts' ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent
],
imports : [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxLegendModule,
IgxCategoryChartModule
],
providers : [],
schemas : []
})
export class AppModule {}
ts コピー import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core' ;
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity' ;
import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts' ;
@Component ({
standalone : false ,
selector : "app-root" ,
styleUrls : ["./app.component.scss" ],
templateUrl : "./app.component.html" ,
changeDetection : ChangeDetectionStrategy.OnPush
})
export class AppComponent implements AfterViewInit
{
@ViewChild ("legend" , { static : true } )
private legend: IgxLegendComponent
@ViewChild ("chart" , { static : true } )
private chart: IgxCategoryChartComponent
private _countryRenewableElectricity: CountryRenewableElectricity = null ;
public get countryRenewableElectricity (): CountryRenewableElectricity {
if (this ._countryRenewableElectricity == null )
{
this ._countryRenewableElectricity = new CountryRenewableElectricity();
}
return this ._countryRenewableElectricity;
}
public constructor (private _detector: ChangeDetectorRef )
{
}
public ngAfterViewInit(): void
{
}
}
ts コピー <div class ="container vertical sample" >
<div class ="legend-title" >
Renewable Electricity Generated
</div >
<div class ="legend" >
<igx-legend
name ="legend"
#legend
orientation ="Horizontal" >
</igx-legend >
</div >
<div class ="container fill" >
<igx-category-chart
name ="chart"
#chart
[dataSource ]="countryRenewableElectricity"
includedProperties ="year, europe, china, america"
chartType ="Line"
[legend ]="legend"
isHorizontalZoomEnabled ="false"
isVerticalZoomEnabled ="false"
computedPlotAreaMarginMode ="Series"
xAxisTitle ="Year"
xAxisTitleTextColor ="gray"
xAxisTitleTextStyle ="10pt 'Titillium Web'"
xAxisTitleAngle ="0"
yAxisTitle ="Trillions of Watt-hours (Twh)"
yAxisTitleTextColor ="gray"
yAxisTitleTextStyle ="10pt 'Titillium Web'"
yAxisTitleAngle ="90"
yAxisTitleLeftMargin ="5" >
</igx-category-chart >
</div >
</div >
html コピー
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Angular completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Ejemplo de etiquetas de eje
El Angular Gráficos le permite un control total sobre la configuración, el formato y el estilo de la fuente de las etiquetas que se muestran en un eje del gráfico. Puede cambiar el ángulo de rotación, el margen, la alineación horizontal y vertical, el color, el relleno y la visibilidad de las etiquetas de los ejes. En el ejemplo siguiente se muestra cómo utilizar estas características de los ejes.
EXAMPLE
DATA
MODULES
TS
HTML
SCSS
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 { NgModule } from "@angular/core" ;
import { FormsModule } from "@angular/forms" ;
import { CommonModule } from "@angular/common" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts' ;
import { IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts' ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent
],
imports : [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxPropertyEditorPanelModule,
IgxLegendModule,
IgxCategoryChartModule
],
providers : [],
schemas : []
})
export class AppModule {}
ts コピー import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core' ;
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-angular-core' ;
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity' ;
import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts' ;
import { IgxPropertyEditorPanelComponent, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts' ;
import { defineAllComponents } from 'igniteui-webcomponents' ;
defineAllComponents();
@Component ({
standalone : false ,
selector : "app-root" ,
styleUrls : ["./app.component.scss" ],
templateUrl : "./app.component.html" ,
changeDetection : ChangeDetectionStrategy.OnPush
})
export class AppComponent implements AfterViewInit
{
@ViewChild ("legend" , { static : true } )
private legend: IgxLegendComponent
@ViewChild ("propertyEditorPanel1" , { static : true } )
private propertyEditorPanel1: IgxPropertyEditorPanelComponent
@ViewChild ("xAxisLabelAngleEditor" , { static : true } )
private xAxisLabelAngleEditor: IgxPropertyEditorPropertyDescriptionComponent
@ViewChild ("yAxisLabelAngleEditor" , { static : true } )
private yAxisLabelAngleEditor: IgxPropertyEditorPropertyDescriptionComponent
@ViewChild ("xAxisLabelTextColorEditor" , { static : true } )
private xAxisLabelTextColorEditor: IgxPropertyEditorPropertyDescriptionComponent
@ViewChild ("chart" , { static : true } )
private chart: IgxCategoryChartComponent
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;
}
public constructor (private _detector: ChangeDetectorRef )
{
}
public ngAfterViewInit(): void
{
}
}
ts コピー <div class ="container vertical sample" >
<div class ="options vertical" >
<igx-property-editor-panel
[componentRenderer ]="renderer"
[target ]="chart"
descriptionType ="CategoryChart"
isHorizontal ="true"
isWrappingEnabled ="true"
name ="propertyEditorPanel1"
#propertyEditorPanel1 >
<igx-property-editor-property-description
propertyPath ="XAxisLabelAngle"
name ="XAxisLabelAngleEditor"
#xAxisLabelAngleEditor
label ="X Axis Label Angle"
shouldOverrideDefaultEditor ="true"
valueType ="EnumValue"
dropDownNames ="0, 45, 90, 135, 180, 225, 270"
dropDownValues ="0, 45, 90, 135, 180, 225, 270"
primitiveValue ="0" >
</igx-property-editor-property-description >
<igx-property-editor-property-description
propertyPath ="YAxisLabelAngle"
name ="YAxisLabelAngleEditor"
#yAxisLabelAngleEditor
label ="Y Axis Label Angle"
shouldOverrideDefaultEditor ="true"
valueType ="EnumValue"
dropDownNames ="-90, -45, 0, 45, 90"
dropDownValues ="-90, -45, 0, 45, 90"
primitiveValue ="0" >
</igx-property-editor-property-description >
<igx-property-editor-property-description
propertyPath ="XAxisLabelTextColor"
name ="XAxisLabelTextColorEditor"
#xAxisLabelTextColorEditor
label ="Y Axis Label Color"
valueType ="EnumValue"
shouldOverrideDefaultEditor ="true"
dropDownNames ="red, green"
dropDownValues ="red, green"
primitiveValue ="red" >
</igx-property-editor-property-description >
</igx-property-editor-panel >
</div >
<div class ="legend-title" >
Renewable Electricity Generated
</div >
<div class ="legend" >
<igx-legend
name ="legend"
#legend
orientation ="Horizontal" >
</igx-legend >
</div >
<div class ="container fill" >
<igx-category-chart
name ="chart"
#chart
[dataSource ]="countryRenewableElectricity"
includedProperties ="year, europe, china, america"
chartType ="Line"
computedPlotAreaMarginMode ="Series"
[legend ]="legend"
isHorizontalZoomEnabled ="false"
isVerticalZoomEnabled ="false"
topMargin ="20"
xAxisLabelAngle ="0"
xAxisLabelTextColor ="gray"
xAxisLabelTextStyle ="10pt 'Titillium Web'"
xAxisLabelTopMargin ="5"
yAxisLabelAngle ="0"
yAxisLabelTextColor ="gray"
yAxisLabelTextStyle ="10pt 'Titillium Web'"
yAxisLabelRightMargin ="5"
yAxisLabelLocation ="OutsideRight"
titleTopMargin ="10" >
</igx-category-chart >
</div >
</div >
html コピー
Los ejes del gráfico tienen la capacidad de realizar un cálculo mejorado con respecto a la cantidad de espacio disponible para las etiquetas del eje propietario. Este cálculo mejorado permite que el eje optimice la cantidad de espacio que se le asigna para mostrar más etiquetas para el eje dado.
Este cálculo mejorado es algo que usted debe aceptar, lo cual puede hacer configurando la propiedad useEnhancedIntervalManagement
en verdadero. Luego, si prefiere mostrar tantas etiquetas como puedan caber en las dimensiones del eje sin configurar manualmente la propiedad interval
del eje, puede establecer la propiedad enhancedIntervalPreferMoreCategoryLabels
en el eje en verdadero.
El gráfico también tiene la capacidad de considerar la rotación automática de las etiquetas si no caben en el espacio asignado, así como la capacidad de aplicar un margen automático al área del trazado para garantizar que las etiquetas puedan caber. Esto es algo que se puede optar inicialmente configurando primero la propiedad autoMarginAndAngleUpdateMode
en el gráfico en SizeChanging
o SizeChangingAndZoom
. Esto le indicará al gráfico cuándo reevaluar el margen automático y el ángulo aplicado a las etiquetas, si lo desea.
Después de configurar autoMarginAndAngleUpdateMode
, puede establecer la propiedad shouldAutoExpandMarginForInitialLabels
en verdadero para optar por el margen automático o establecer la propiedad shouldConsiderAutoRotationForInitialLabels
en verdadero para la rotación automática. También puede personalizar aún más el margen automático que se aplica configurando autoExpandMarginExtraPadding
y autoExpandMarginMaximumValue
para proporcionar espacio adicional o un margen máximo posible, respectivamente.
Los formatos de etiqueta personalizados, como IgxNumberFormatSpecifier
y IgxDateTimeFormatSpecifier
se pueden agregar a cada eje a través de las XAxisLabelFormatSpecifier
colecciones y YAxisLabelFormatSpecifier
. Se usa normalmente para aplicar el formato de número, fecha y hora confidencial del lenguaje Intl.NumberFormat e Intl.DateTimeFormat. Para que se aplique un formato personalizado a las etiquetas, el o xAxisLabelFormat
debe establecerse en el yAxisLabelFormat
nombre de la propiedad del elemento de datos en el IgxCategoryChartComponent
, por ejemplo. {Date}
Para el IgxFinancialChartComponent
el número es el contexto porque utiliza un eje numérico, por lo tanto, debe establecerse en {0}
.
El siguiente ejemplo formatea el eje y con un IgxNumberFormatSpecifier
para representar los precios en dólares estadounidenses de las películas más taquilleras de los Estados Unidos.
EXAMPLE
DATA
MODULES
TS
HTML
SCSS
export class HighestGrossingMoviesItem {
public constructor (init: Partial<HighestGrossingMoviesItem> ) {
Object .assign(this , init);
}
public franchise: string ;
public totalRevenue: number ;
public highestGrossing: number ;
}
export class HighestGrossingMovies extends Array <HighestGrossingMoviesItem > {
public constructor (items: Array <HighestGrossingMoviesItem> | number = -1 ) {
if (Array .isArray(items)) {
super (...items);
} else {
const newItems = [
new HighestGrossingMoviesItem(
{
franchise : `Marvel Universe` ,
totalRevenue : 22.55 ,
highestGrossing : 2.8
}),
new HighestGrossingMoviesItem(
{
franchise : `Star Wars` ,
totalRevenue : 10.32 ,
highestGrossing : 2.07
}),
new HighestGrossingMoviesItem(
{
franchise : `Harry Potter` ,
totalRevenue : 9.19 ,
highestGrossing : 1.34
}),
new HighestGrossingMoviesItem(
{
franchise : `Avengers` ,
totalRevenue : 7.76 ,
highestGrossing : 2.8
}),
new HighestGrossingMoviesItem(
{
franchise : `Spider Man` ,
totalRevenue : 7.22 ,
highestGrossing : 1.28
}),
new HighestGrossingMoviesItem(
{
franchise : `James Bond` ,
totalRevenue : 7.12 ,
highestGrossing : 1.11
}),
];
super (...newItems.slice(0 ));
}
}
}
ts コピー import { NgModule } from "@angular/core" ;
import { FormsModule } from "@angular/forms" ;
import { CommonModule } from "@angular/common" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts' ;
import { IgxDataLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts' ;
import { IgxNumberFormatSpecifierModule } from 'igniteui-angular-core' ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent
],
imports : [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxPropertyEditorPanelModule,
IgxDataLegendModule,
IgxCategoryChartModule,
IgxNumberFormatSpecifierModule
],
providers : [],
schemas : []
})
export class AppModule {}
ts コピー import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core' ;
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, DataLegendDescriptionModule, CategoryChartDescriptionModule, NumberFormatSpecifierDescriptionModule } from 'igniteui-angular-core' ;
import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies' ;
import { IgxDataLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts' ;
import { IgxNumberFormatSpecifier } from 'igniteui-angular-core' ;
@Component ({
standalone : false ,
selector : "app-root" ,
styleUrls : ["./app.component.scss" ],
templateUrl : "./app.component.html" ,
changeDetection : ChangeDetectionStrategy.OnPush
})
export class AppComponent implements AfterViewInit
{
@ViewChild ("legend" , { static : true } )
private legend: IgxDataLegendComponent
private _numberFormatSpecifier1: IgxNumberFormatSpecifier[] | null = null ;
public get numberFormatSpecifier1 (): IgxNumberFormatSpecifier [] {
if (this ._numberFormatSpecifier1 == null )
{
let numberFormatSpecifier1: IgxNumberFormatSpecifier[] = [];
var numberFormatSpecifier2 = new IgxNumberFormatSpecifier();
numberFormatSpecifier2.style = "currency" ;
numberFormatSpecifier2.currency = "USD" ;
numberFormatSpecifier2.currencyDisplay = "symbol" ;
numberFormatSpecifier2.maximumFractionDigits = 2 ;
numberFormatSpecifier2.minimumFractionDigits = 2 ;
numberFormatSpecifier1.push(numberFormatSpecifier2)
this ._numberFormatSpecifier1 = numberFormatSpecifier1;
}
return this ._numberFormatSpecifier1;
}
@ViewChild ("chart" , { static : true } )
private chart: IgxCategoryChartComponent
private _numberFormatSpecifier3: IgxNumberFormatSpecifier[] | null = null ;
public get numberFormatSpecifier3 (): IgxNumberFormatSpecifier [] {
if (this ._numberFormatSpecifier3 == null )
{
let numberFormatSpecifier3: IgxNumberFormatSpecifier[] = [];
var numberFormatSpecifier4 = new IgxNumberFormatSpecifier();
numberFormatSpecifier4.style = "currency" ;
numberFormatSpecifier4.currency = "USD" ;
numberFormatSpecifier4.currencyDisplay = "symbol" ;
numberFormatSpecifier4.maximumFractionDigits = 2 ;
numberFormatSpecifier4.minimumFractionDigits = 2 ;
numberFormatSpecifier3.push(numberFormatSpecifier4)
this ._numberFormatSpecifier3 = numberFormatSpecifier3;
}
return this ._numberFormatSpecifier3;
}
private _numberFormatSpecifier5: IgxNumberFormatSpecifier[] | null = null ;
public get numberFormatSpecifier5 (): IgxNumberFormatSpecifier [] {
if (this ._numberFormatSpecifier5 == null )
{
let numberFormatSpecifier5: IgxNumberFormatSpecifier[] = [];
var numberFormatSpecifier6 = new IgxNumberFormatSpecifier();
numberFormatSpecifier6.style = "currency" ;
numberFormatSpecifier6.currency = "USD" ;
numberFormatSpecifier6.currencyDisplay = "symbol" ;
numberFormatSpecifier6.minimumFractionDigits = 0 ;
numberFormatSpecifier5.push(numberFormatSpecifier6)
this ._numberFormatSpecifier5 = numberFormatSpecifier5;
}
return this ._numberFormatSpecifier5;
}
private _highestGrossingMovies: HighestGrossingMovies = null ;
public get highestGrossingMovies (): HighestGrossingMovies {
if (this ._highestGrossingMovies == null )
{
this ._highestGrossingMovies = new HighestGrossingMovies();
}
return this ._highestGrossingMovies;
}
private _componentRenderer: ComponentRenderer = null ;
public get renderer (): ComponentRenderer {
if (this ._componentRenderer == null ) {
this ._componentRenderer = new ComponentRenderer();
var context = this ._componentRenderer.context;
PropertyEditorPanelDescriptionModule.register(context);
DataLegendDescriptionModule.register(context);
CategoryChartDescriptionModule.register(context);
NumberFormatSpecifierDescriptionModule.register(context);
}
return this ._componentRenderer;
}
public constructor (private _detector: ChangeDetectorRef )
{
}
public ngAfterViewInit(): void
{
}
}
ts コピー <div class ="container vertical sample" >
<div class ="legend-title" >
Highest Grossing Movie Franchises
</div >
<div class ="legend" >
<igx-data-legend
name ="legend"
#legend
[target ]="chart"
valueFormatString ="{0} Billion"
[valueFormatSpecifiers ]="numberFormatSpecifier1" >
</igx-data-legend >
</div >
<div class ="container fill" >
<igx-category-chart
name ="chart"
#chart
[dataSource ]="highestGrossingMovies"
chartType ="Column"
isHorizontalZoomEnabled ="false"
isVerticalZoomEnabled ="false"
finalValueAnnotationsPrecision ="2"
dataToolTipValueFormatString ="{0} Billion"
[dataToolTipValueFormatSpecifiers ]="numberFormatSpecifier3"
yAxisLabelFormat ="{0}B"
[yAxisLabelFormatSpecifiers ]="numberFormatSpecifier5" >
</igx-category-chart >
</div >
</div >
html コピー
Ejemplo de rango de ejes
En los gráficos de Angular, puede definir un valor de rango mínimo y máximo de rango de un eje numérico o de tiempo. El rango mínimo es el valor más bajo del eje y el rango máximo es el valor más alto del eje. Estos se establecen configurando las yAxisMinimumValue
opciones y yAxisMaximumValue
.
De forma predeterminada, los gráficos calcularán los valores mínimo y máximo para el rango del eje numérico y de tiempo en función de los puntos de valor correspondientes más bajo y más alto de sus datos, pero este cálculo automático puede no ser apropiado para su conjunto de puntos de datos en todos los casos. Por ejemplo, si sus datos tienen un valor mínimo de 850, es posible que desee establecer yAxisMinimumValue
en 800 para que haya un valor de espacio de 50 entre el eje mínimo y el valor más bajo de los puntos de datos. La misma idea se puede aplicar al valor mínimo del eje y al valor más alto de los puntos de datos utilizando la propiedad yAxisMaximumValue
.
EXAMPLE
DATA
MODULES
TS
HTML
SCSS
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 { NgModule } from "@angular/core" ;
import { FormsModule } from "@angular/forms" ;
import { CommonModule } from "@angular/common" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts' ;
import { IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts' ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent
],
imports : [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxPropertyEditorPanelModule,
IgxLegendModule,
IgxCategoryChartModule
],
providers : [],
schemas : []
})
export class AppModule {}
ts コピー import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core' ;
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-angular-core' ;
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity' ;
import { IgxPropertyEditorPropertyDescriptionChangedEventArgs, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts' ;
import { IgxCategoryChartComponent, MarkerType, MarkerType_$type } from 'igniteui-angular-charts' ;
import { EnumUtil } from 'igniteui-angular-core' ;
import { IgxLegendComponent } from 'igniteui-angular-charts' ;
import { IgxPropertyEditorPanelComponent } from 'igniteui-angular-layouts' ;
import { defineAllComponents } from 'igniteui-webcomponents' ;
defineAllComponents();
@Component ({
standalone : false ,
selector : "app-root" ,
styleUrls : ["./app.component.scss" ],
templateUrl : "./app.component.html" ,
changeDetection : ChangeDetectionStrategy.OnPush
})
export class AppComponent implements AfterViewInit
{
@ViewChild ("legend" , { static : true } )
private legend: IgxLegendComponent
@ViewChild ("propertyEditorPanel1" , { static : true } )
private propertyEditorPanel1: IgxPropertyEditorPanelComponent
@ViewChild ("yAxisMinimumValue" , { static : true } )
private yAxisMinimumValue: IgxPropertyEditorPropertyDescriptionComponent
@ViewChild ("yAxisMaximumValue" , { static : true } )
private yAxisMaximumValue: IgxPropertyEditorPropertyDescriptionComponent
@ViewChild ("chart" , { static : true } )
private chart: IgxCategoryChartComponent
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;
}
public constructor (private _detector: ChangeDetectorRef )
{
}
public ngAfterViewInit(): void
{
}
public editorChangeUpdateYAxisMinimumValue({ sender, args }: { sender : any , args : IgxPropertyEditorPropertyDescriptionChangedEventArgs }): void {
var yAxisMinimumVal = args.newValue;
this .chart.yAxisMinimumValue = parseInt (yAxisMinimumVal);
}
public editorChangeUpdateYAxisMaximumValue({ sender, args }: { sender : any , args : IgxPropertyEditorPropertyDescriptionChangedEventArgs }): void {
var yAxisMaximumVal = args.newValue;
this .chart.yAxisMaximumValue = parseInt (yAxisMaximumVal);
}
}
ts コピー <div class ="container vertical sample" >
<div class ="options vertical" >
<igx-property-editor-panel
[componentRenderer ]="renderer"
[target ]="chart"
descriptionType ="CategoryChart"
isHorizontal ="true"
isWrappingEnabled ="true"
name ="propertyEditorPanel1"
#propertyEditorPanel1 >
<igx-property-editor-property-description
propertyPath ="YAxisMinimumValueHandler"
name ="YAxisMinimumValue"
#yAxisMinimumValue
label ="Y Axis Minimum Value"
shouldOverrideDefaultEditor ="true"
valueType ="EnumValue"
dropDownNames ="0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100"
dropDownValues ="0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100"
primitiveValue ="0"
(changed )="this.editorChangeUpdateYAxisMinimumValue($event)" >
</igx-property-editor-property-description >
<igx-property-editor-property-description
propertyPath ="YAxisMaximumValueHandler"
name ="YAxisMaximumValue"
#yAxisMaximumValue
label ="Y Axis Maximum Value"
shouldOverrideDefaultEditor ="true"
valueType ="EnumValue"
dropDownNames ="100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200"
dropDownValues ="100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200"
primitiveValue ="150"
(changed )="this.editorChangeUpdateYAxisMaximumValue($event)" >
</igx-property-editor-property-description >
</igx-property-editor-panel >
</div >
<div class ="legend-title" >
Highest Grossing Movie Franchises
</div >
<div class ="legend" >
<igx-legend
name ="legend"
#legend
orientation ="Horizontal" >
</igx-legend >
</div >
<div class ="container fill" >
<igx-category-chart
name ="chart"
#chart
[dataSource ]="countryRenewableElectricity"
includedProperties ="year, europe, china, america"
[legend ]="legend"
chartType ="Line"
computedPlotAreaMarginMode ="Series"
isHorizontalZoomEnabled ="false"
isVerticalZoomEnabled ="false"
yAxisMinimumValue ="0"
yAxisMaximumValue ="150" >
</igx-category-chart >
</div >
</div >
html コピー
Modos de eje y escala
En los controles IgxFinancialChartComponent
e IgxCategoryChartComponent
, puede elegir si sus datos se trazan en escala logarítmica a lo largo del eje y cuando la propiedad yAxisIsLogarithmic
se establece en verdadero o en escala lineal cuando esta propiedad se establece en falso (valor predeterminado). Con la propiedad yAxisLogarithmBase
, puede cambiar la base de la escala logarítmica del valor predeterminado de 10 a otro valor entero.
El control y componente IgxFinancialChartComponent
le permite elegir cómo se representan sus datos a lo largo del eje y utilizando la propiedad yAxisMode
que proporciona los modos Numeric
y PercentChange
. El modo Numeric
trazará datos con los valores exactos, mientras que el modo PercentChange
mostrará los datos como cambio porcentual en relación con el primer punto de datos proporcionado. El valor predeterminado es el modo Numeric
.
Además de la propiedad yAxisMode
, el control IgxFinancialChartComponent
tiene la propiedad xAxisMode
que proporciona modos Time
y Ordinal
para el eje x. El modo Time
mostrará espacio a lo largo del eje x para las lagunas en los datos (por ejemplo, no se negocian acciones los fines de semana o días festivos). El modo Ordinal
colapsará las áreas de fechas donde no existen datos. El valor predeterminado es el modo Ordinal
.
Ejemplo de espacio entre ejes
La xAxisGap
propiedad de los gráficos Angular determina la cantidad de espacio entre las columnas o barras de las series trazadas. Esta propiedad acepta un valor numérico entre 0,0 y 1,0. El valor representa un ancho relativo del espacio del número disponible de píxeles entre la serie. Establecer esta propiedad en 0 significaría que no hay ningún espacio representado entre la serie, y establecerla en 1 representaría el espacio máximo disponible.
La xAxisMaximumGap
propiedad de los gráficos de Angular determina el valor de espacio máximo que se permitirá. Este valor predeterminado se establece en 1.0, pero se puede cambiar en función de lo que establezca xAxisGap
.
La xAxisMinimumGapSize
propiedad de los gráficos de Angular determina la cantidad mínima de píxeles que se utilizarán para el espacio entre las categorías, si es posible.
El siguiente ejemplo muestra la temperatura máxima promedio en grados Celsius en el Central Park de la ciudad de Nueva York representada por un Gráfico de columnas con un xAxisGap
inicialmente establecido en 1, por lo que habrá un ancho de categoría completo entre las columnas. Hay un control deslizante que le permite configurar el espacio en este ejemplo para que pueda ver qué hacen los diferentes valores.
EXAMPLE
DATA
MODULES
TS
HTML
SCSS
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 { NgModule } from "@angular/core" ;
import { FormsModule } from "@angular/forms" ;
import { CommonModule } from "@angular/common" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts' ;
import { IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts' ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent
],
imports : [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxPropertyEditorPanelModule,
IgxLegendModule,
IgxCategoryChartModule
],
providers : [],
schemas : []
})
export class AppModule {}
ts コピー import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core' ;
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-angular-core' ;
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity' ;
import { IgxPropertyEditorPanelComponent, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts' ;
import { IgxCategoryChartComponent } from 'igniteui-angular-charts' ;
import { defineAllComponents } from 'igniteui-webcomponents' ;
defineAllComponents();
@Component ({
standalone : false ,
selector : "app-root" ,
styleUrls : ["./app.component.scss" ],
templateUrl : "./app.component.html" ,
changeDetection : ChangeDetectionStrategy.OnPush
})
export class AppComponent implements AfterViewInit
{
@ViewChild ("propertyEditorPanel1" , { static : true } )
private propertyEditorPanel1: IgxPropertyEditorPanelComponent
@ViewChild ("xAxisGap" , { static : true } )
private xAxisGap: IgxPropertyEditorPropertyDescriptionComponent
@ViewChild ("xAxisMaximumGap" , { static : true } )
private xAxisMaximumGap: IgxPropertyEditorPropertyDescriptionComponent
@ViewChild ("chart" , { static : true } )
private chart: IgxCategoryChartComponent
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;
}
public constructor (private _detector: ChangeDetectorRef )
{
}
public ngAfterViewInit(): void
{
}
}
ts コピー <div class ="container vertical sample" >
<div class ="options vertical" >
<igx-property-editor-panel
[componentRenderer ]="renderer"
[target ]="chart"
descriptionType ="CategoryChart"
isHorizontal ="true"
isWrappingEnabled ="true"
name ="propertyEditorPanel1"
#propertyEditorPanel1 >
<igx-property-editor-property-description
propertyPath ="XAxisGap"
name ="XAxisGap"
#xAxisGap
label ="X Axis - Gap"
shouldOverrideDefaultEditor ="true"
valueType ="Slider"
primitiveValue ="0.5"
min ="0"
max ="1.5"
step ="0.1" >
</igx-property-editor-property-description >
<igx-property-editor-property-description
propertyPath ="XAxisMaximumGap"
name ="XAxisMaximumGap"
#xAxisMaximumGap
label ="Maximum Gap"
shouldOverrideDefaultEditor ="true"
valueType ="EnumValue"
dropDownNames ="1.5, 1.3, 1.0, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0"
dropDownValues ="1.5, 1.3, 1.0, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0"
primitiveValue ="0.5" >
</igx-property-editor-property-description >
</igx-property-editor-panel >
</div >
<div class ="legend-title" >
Renewable Electricity Generated
</div >
<div class ="container fill" >
<igx-category-chart
name ="chart"
#chart
[dataSource ]="countryRenewableElectricity"
includedProperties ="year, europe, china, america"
chartType ="Column"
crosshairsSnapToData ="true"
yAxisTitle ="TWh"
isHorizontalZoomEnabled ="false"
isVerticalZoomEnabled ="false"
xAxisInterval ="1"
xAxisGap ="0.5"
xAxisMaximumGap ="1.5" >
</igx-category-chart >
</div >
</div >
html コピー
Ejemplo de superposición de ejes
La xAxisOverlap
propiedad de los gráficos de Angular, permite establecer la superposición de las columnas o barras renderizadas de las series trazadas. Esta propiedad acepta un valor numérico entre -1,0 y 1,0. El valor representa una superposición relativa del número disponible de píxeles dedicados a cada serie. Si se establece esta propiedad en un valor negativo (hasta -1,0), las categorías se alejan unas de otras, lo que genera una brecha entre ellas. Por el contrario, si se establece esta propiedad en un valor positivo (hasta 1,0), las categorías se superponen entre sí. Un valor de 1 dirige el gráfico para representar las categorías una encima de la otra.
El siguiente ejemplo muestra una comparación de las franquicias cinematográficas más taquilleras a nivel mundial comparadas con los ingresos totales de taquilla mundial de la franquicia y la película más taquillera de la serie, representadas por un Gráfico de columnas con un xAxisOverlap
inicialmente establecido en 1, por lo que las columnas se superpondrán completamente entre sí. Hay un control deslizante que le permite configurar la superposición en este ejemplo para que pueda ver qué hacen los diferentes valores.
EXAMPLE
DATA
MODULES
TS
HTML
SCSS
export class HighestGrossingMoviesItem {
public constructor (init: Partial<HighestGrossingMoviesItem> ) {
Object .assign(this , init);
}
public franchise: string ;
public totalRevenue: number ;
public highestGrossing: number ;
}
export class HighestGrossingMovies extends Array <HighestGrossingMoviesItem > {
public constructor (items: Array <HighestGrossingMoviesItem> | number = -1 ) {
if (Array .isArray(items)) {
super (...items);
} else {
const newItems = [
new HighestGrossingMoviesItem(
{
franchise : `Marvel Universe` ,
totalRevenue : 22.55 ,
highestGrossing : 2.8
}),
new HighestGrossingMoviesItem(
{
franchise : `Star Wars` ,
totalRevenue : 10.32 ,
highestGrossing : 2.07
}),
new HighestGrossingMoviesItem(
{
franchise : `Harry Potter` ,
totalRevenue : 9.19 ,
highestGrossing : 1.34
}),
new HighestGrossingMoviesItem(
{
franchise : `Avengers` ,
totalRevenue : 7.76 ,
highestGrossing : 2.8
}),
new HighestGrossingMoviesItem(
{
franchise : `Spider Man` ,
totalRevenue : 7.22 ,
highestGrossing : 1.28
}),
new HighestGrossingMoviesItem(
{
franchise : `James Bond` ,
totalRevenue : 7.12 ,
highestGrossing : 1.11
}),
];
super (...newItems.slice(0 ));
}
}
}
ts コピー import { NgModule } from "@angular/core" ;
import { FormsModule } from "@angular/forms" ;
import { CommonModule } from "@angular/common" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts' ;
import { IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts' ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent
],
imports : [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxPropertyEditorPanelModule,
IgxLegendModule,
IgxCategoryChartModule
],
providers : [],
schemas : []
})
export class AppModule {}
ts コピー import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core' ;
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-angular-core' ;
import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies' ;
import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts' ;
import { IgxPropertyEditorPanelComponent, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts' ;
import { defineAllComponents } from 'igniteui-webcomponents' ;
defineAllComponents();
@Component ({
standalone : false ,
selector : "app-root" ,
styleUrls : ["./app.component.scss" ],
templateUrl : "./app.component.html" ,
changeDetection : ChangeDetectionStrategy.OnPush
})
export class AppComponent implements AfterViewInit
{
@ViewChild ("legend" , { static : true } )
private legend: IgxLegendComponent
@ViewChild ("propertyEditorPanel1" , { static : true } )
private propertyEditorPanel1: IgxPropertyEditorPanelComponent
@ViewChild ("xAxisOverlap" , { static : true } )
private xAxisOverlap: IgxPropertyEditorPropertyDescriptionComponent
@ViewChild ("chart" , { static : true } )
private chart: IgxCategoryChartComponent
private _highestGrossingMovies: HighestGrossingMovies = null ;
public get highestGrossingMovies (): HighestGrossingMovies {
if (this ._highestGrossingMovies == null )
{
this ._highestGrossingMovies = new HighestGrossingMovies();
}
return this ._highestGrossingMovies;
}
private _componentRenderer: ComponentRenderer = null ;
public get renderer (): ComponentRenderer {
if (this ._componentRenderer == null ) {
this ._componentRenderer = new ComponentRenderer();
var context = this ._componentRenderer.context;
PropertyEditorPanelDescriptionModule.register(context);
LegendDescriptionModule.register(context);
CategoryChartDescriptionModule.register(context);
}
return this ._componentRenderer;
}
public constructor (private _detector: ChangeDetectorRef )
{
}
public ngAfterViewInit(): void
{
}
}
ts コピー <div class ="container vertical sample" >
<div class ="options vertical" >
<igx-property-editor-panel
[componentRenderer ]="renderer"
[target ]="chart"
descriptionType ="CategoryChart"
isHorizontal ="true"
isWrappingEnabled ="true"
name ="propertyEditorPanel1"
#propertyEditorPanel1 >
<igx-property-editor-property-description
propertyPath ="XAxisOverlap"
name ="XAxisOverlap"
#xAxisOverlap
label ="X Axis - Overlap"
shouldOverrideDefaultEditor ="true"
valueType ="Slider"
min ="0"
max ="1"
step ="0.1"
primitiveValue ="0" >
</igx-property-editor-property-description >
</igx-property-editor-panel >
</div >
<div class ="legend-title" >
Highest Grossing Movie Franchises
</div >
<div class ="legend" >
<igx-legend
name ="legend"
#legend
orientation ="Horizontal" >
</igx-legend >
</div >
<div class ="container fill" >
<igx-category-chart
name ="chart"
#chart
[dataSource ]="highestGrossingMovies"
chartType ="Column"
crosshairsSnapToData ="true"
isHorizontalZoomEnabled ="false"
isVerticalZoomEnabled ="false"
xAxisInterval ="1"
xAxisOverlap ="1" >
</igx-category-chart >
</div >
</div >
html コピー
Recursos adicionales
Puede encontrar más información sobre las funciones de gráficos relacionadas en estos temas:
Referencias de API
La siguiente es una lista de miembros de API mencionados en las secciones anteriores: