Angular Chart Synchronization
El gráfico de datos Ignite UI for Angular permite la sincronización con respecto a la coordinación de eventos de zoom, panorámica y retícula entre varios gráficos. Esto puede ayudarle a visualizar las mismas áreas de varios gráficos, suponiendo que sus fuentes de datos sean similares o iguales con respecto a los ejes.
Ejemplo de sincronización de gráficos de Angular
Este ejemplo muestra la sincronización de dos gráficos de datos Angular:
EXAMPLE
DATA
MODULES
TS
HTML
SCSS
import { Injectable } from "@angular/core" ;
@Injectable ()
export class SharedData {
public static getEnergyProduction ( ) {
const data: any [] = [
{
Coal : 400000000 ,
Country : "Canada" ,
Gas : 175000000 ,
Hydro : 350000000 ,
Nuclear : 225000000 ,
Oil : 100000000
},
{
Coal : 925000000 ,
Country : "China" ,
Gas : 350000000 ,
Hydro : 625000000 ,
Nuclear : 400000000 ,
Oil : 200000000
},
{
Coal : 550000000 ,
Country : "Russia" ,
Gas : 250000000 ,
Hydro : 425000000 ,
Nuclear : 475000000 ,
Oil : 200000000
},
{
Coal : 450000000 ,
Country : "Australia" ,
Gas : 150000000 ,
Hydro : 350000000 ,
Nuclear : 175000000 ,
Oil : 100000000
},
{
Coal : 800000000 ,
Country : "United States" ,
Gas : 475000000 ,
Hydro : 750000000 ,
Nuclear : 575000000 ,
Oil : 250000000
},
{
Coal : 375000000 ,
Country : "France" ,
Gas : 350000000 ,
Hydro : 325000000 ,
Nuclear : 275000000 ,
Oil : 150000000
}
];
return data;
}
public static getItems(startValue: number , maxPoints : number , useShortLabels?: boolean ): any [] {
const data: any [] = [];
let value = startValue;
for (let i = 0 ; i <= maxPoints; i++) {
value += Math .random() * 4.0 - 2.0 ;
const v = Math .round(value);
let l = i.toString();
if (useShortLabels) {
l = this .toShortString(i);
}
data.push({ Label : l, Value : v });
}
return data;
}
public static getTemperatures(startValue: number , startYear : number , endYear : number ): any [] {
const data: any [] = [];
let value = startValue;
for (let i = startYear; i <= endYear; i++) {
value += (Math .random() - 0.5 ) * 0.5 ;
const high = value + (Math .random() * 2 );
const low = value - (Math .random() * 2 );
const v = Math .abs(Math .round(value * 10 ) / 10 );
const h = Math .abs(Math .round(high * 10 ) / 10 );
const l = Math .abs(Math .round(low * 10 ) / 10 );
data.push({ Label : i.toString(), Value : v, High : h, Low : l });
}
return data;
}
public static getLastItem(array: any []): any {
if (array.length === 0 ) {
return null ;
}
return array[array.length - 1 ];
}
public static getNewItem(array: any [], index : number ): any {
const lastItem = this .getLastItem(array);
const newValue = lastItem.Value + Math .random() * 4.0 - 2.0 ;
return { Label : index.toString(), Value : newValue };
}
public static toShortString(largeValue: number ): string {
let roundValue: number ;
if (largeValue >= 1000000 ) {
roundValue = Math .round(largeValue / 100000 ) / 10 ;
return roundValue + "m" ;
}
if (largeValue >= 1000 ) {
roundValue = Math .round(largeValue / 100 ) / 10 ;
return roundValue + "k" ;
}
roundValue = Math .round(largeValue);
return roundValue + "" ;
}
public static addDays(date: Date , days : number ): Date {
date.setDate(date.getDate() + days);
return date;
}
}
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 { IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxLegendModule, IgxDataChartInteractivityModule } from "igniteui-angular-charts" ;
import { SharedData } from "./SharedData" ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent,
],
imports : [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxDataChartCoreModule,
IgxDataChartCategoryModule,
IgxLegendModule,
IgxDataChartInteractivityModule
],
providers : [SharedData],
schemas : []
})
export class AppModule {}
ts コピー import { Component, ViewChild } from "@angular/core" ;
import { IgxDataChartComponent } from "igniteui-angular-charts" ;
@Component ({
standalone : false ,
selector : "app-root" ,
styleUrls : ["./app.component.scss" ],
templateUrl : "./app.component.html"
})
export class AppComponent {
public data: any [];
@ViewChild ("chart1" , { static : true })
public chart1: IgxDataChartComponent;
@ViewChild ("chart2" , { static : true })
public chart2: IgxDataChartComponent;
public syncHorizontally: boolean ;
public syncVertically: boolean ;
constructor ( ) {
this .initData();
this .syncHorizontally = true ;
this .syncVertically = true ;
}
public initData ( ) {
this .data = [
{ Country : "Canada" , Coal : 400 , Oil : 100 , Gas : 175 , Nuclear : 225 , Hydro : 350 },
{ Country : "China" , Coal : 925 , Oil : 200 , Gas : 350 , Nuclear : 400 , Hydro : 625 },
{ Country : "Russia" , Coal : 550 , Oil : 200 , Gas : 250 , Nuclear : 475 , Hydro : 425 },
{ Country : "Australia" , Coal : 450 , Oil : 100 , Gas : 150 , Nuclear : 175 , Hydro : 350 },
{ Country : "United States" , Coal : 800 , Oil : 250 , Gas : 475 , Nuclear : 575 , Hydro : 750 },
{ Country : "France" , Coal : 375 , Oil : 150 , Gas : 350 , Nuclear : 275 , Hydro : 325 }
];
}
public syncHorizontalChanged (e: any ) {
const checked = e.target.checked;
this .chart1.synchronizeHorizontally = checked;
this .chart2.synchronizeHorizontally = checked;
}
public syncVerticalChanged (e: any ) {
const checked = e.target.checked;
this .chart1.synchronizeVertically = checked;
this .chart2.synchronizeVertically = checked;
}
}
ts コピー <div class ="container vertical" >
<div class ="options horizontal" >
<label > <input type ="checkbox" (change )="syncHorizontalChanged($event)" > Sync Horizontally</label >
<label > <input type ="checkbox" (change )="syncVerticalChanged($event)" > Sync Vertically</label >
</div >
<div class ="container" >
<igx-data-chart
width ="100%" syncChannel ="ChannelA" synchronizeHorizontally =false synchronizeVertically =false
height ="50%" #chart1 isHorizontalZoomEnabled =true isVerticalZoomEnabled =true
[dataSource ]="data" >
<igx-category-x-axis #xAxis label ="Country" > </igx-category-x-axis >
<igx-numeric-y-axis #yAxis minimumValue =0 > </igx-numeric-y-axis >
<igx-line-series name ="series1" [xAxis ]="xAxis" [yAxis ]="yAxis" valueMemberPath ="Coal" > </igx-line-series >
</igx-data-chart >
<igx-data-chart isHorizontalZoomEnabled =true isVerticalZoomEnabled =true
width ="100%" syncChannel ="ChannelA" synchronizeHorizontally =false synchronizeVertically =false
height ="50%" #chart2
[dataSource ]="data" >
<igx-category-x-axis #xAxis2 label ="Country" > </igx-category-x-axis >
<igx-numeric-y-axis #yAxis2 minimumValue =0 > </igx-numeric-y-axis >
<igx-line-series name ="series2" [xAxis ]="xAxis2" [yAxis ]="yAxis2" valueMemberPath ="Coal" > </igx-line-series >
</igx-data-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.
Propiedades de sincronización de gráficos
Hay cuatro opciones de sincronización de gráficos: puede sincronizar solo horizontalmente, solo verticalmente, ambas o puede elegir no sincronizar en absoluto, que es la opción predeterminada.
Si desea sincronizar un conjunto de gráficos, puede asignarles el mismo nombre a la propiedad SyncChannel
y luego especificar si sincronizar o no los gráficos horizontal y/o verticalmente estableciendo las propiedades SynchronizeHorizontally
y SynchronizeVertically
en el valor booleano correspondiente.
Tenga en cuenta que para sincronizar vertical y/u horizontalmente, deberá establecer la propiedad isHorizontalZoomEnabled
y/o isVerticalZoomEnabled
en true , respectivamente. Un gráfico sincronizado que depende de otro gráfico seguirá haciendo zoom independientemente de la configuración de esta propiedad.
Referencias de API
La siguiente es una lista de miembros de API mencionados en las secciones anteriores: