Sincronización de gráficos Web Components

El gráfico de datos Ignite UI for Web Components 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 Web Components

En este ejemplo se muestra la sincronización de dos gráficos de datos Web Components:



export class SampleFinancialData {

    public static create(items?: number): any[] {
        // initial values
        let v = 10000;
        let o = 500;
        let h = Math.round(o + (Math.random() * 5));
        let l = Math.round(o - (Math.random() * 5));
        let c = Math.round(l + (Math.random() * (h - l)));

        if (items === undefined) {
            items = 200;
        }

        const today = new Date();
        const end = new Date(today.getFullYear(), 11, 1);
        let time = this.addDays(end, -items);

        const data: any[] = [];
        for (let i = 0; i < items; i++) {
            const date = time.toDateString();
            const label = this.getShortDate(time, false);
            // adding new data item
            data.push({"Time": time, "Date": date, "Label": label, "Close": c, "Open": o, "High": h, "Low": l, "Volume": v});
            // generating new values
            const mod = Math.random() - 0.45;
            o = Math.round(o + (mod * 5 * 2));
            v = Math.round(v + (mod * 5 * 100));
            h = Math.round(o + (Math.random() * 5));
            l = Math.round(o - (Math.random() * 5));
            c = Math.round(l + (Math.random() * (h - l)));
            time = this.addDays(time, 1);
        }
        return data;
    }

    public static addDays(dt: Date, days: number): Date {
        return new Date(dt.getTime() + days * 24 * 60 * 60 * 1000);
    }

    public static getShortDate(dt: Date, showYear: boolean): string {
        const months = [
            "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
        ];
        const ind = dt.getMonth();
        const day = dt.getDay() + 1;
        let label = months[ind] + " " + day;
        if (showYear) {
            label += " " +  dt.getFullYear();
        }
        return label;
    }
}
ts

import { SampleFinancialData } from './SampleFinancialData';
import { IgcDataChartComponent } from 'igniteui-webcomponents-charts';
import { IgcDataChartCoreModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartCategoryCoreModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartCategoryModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { IgcFinancialPriceSeriesModule } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';

ModuleManager.register(
    IgcDataChartCoreModule,
    IgcDataChartCategoryCoreModule,
    IgcDataChartCategoryModule,
    IgcDataChartInteractivityModule,
    IgcFinancialPriceSeriesModule
);

export class DataChartSynchronization {

    private chart1: IgcDataChartComponent;
    private chart2: IgcDataChartComponent;

    constructor() {

        this.chart1 = document.getElementById('chart1') as IgcDataChartComponent;
        this.chart1.dataSource = SampleFinancialData.create();

        this.chart2 = document.getElementById('chart2') as IgcDataChartComponent;
        this.chart2.dataSource = SampleFinancialData.create();
    }

}

new DataChartSynchronization();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>DataChartSynchronization</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" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample">
    <div class="container" style="height: 100%">
        <igc-data-chart id="chart1" width="100%" height="50%"
            is-horizontal-zoom-enabled="true"
            is-vertical-zoom-enabled="true"
            sync-channel="ChannelA"
            synchronize-horizontally="true"
            synchronize-vertically="true"
            subtitle="Google Stock Prices">

            <igc-category-x-axis name="xAxis" label="Label"></igc-category-x-axis>
            <igc-numeric-y-axis  name="yAxis" ></igc-numeric-y-axis>

            <igc-financial-price-series
                id="series1"
                x-axis-name="xAxis"
                y-axis-name="yAxis"
                display-type="OHLC"
                high-member-path="High"
                low-member-path="Low"
                close-member-path="Close"
                open-member-path="Open"
                volume-member-path="Volume">
            </igc-financial-price-series>

        </igc-data-chart>

        <igc-data-chart id="chart2" width="100%" height="50%"
            is-horizontal-zoom-enabled="true"
            is-vertical-zoom-enabled="true"
            sync-channel="ChannelA"
            synchronize-horizontally="true"
            synchronize-vertically="true"
            subtitle="Amazon Stock Prices"
            subtitle-top-margin="10">

            <igc-category-x-axis name="xAxis" label="Label"></igc-category-x-axis>
            <igc-numeric-y-axis  name="yAxis" ></igc-numeric-y-axis>

            <igc-financial-price-series
                id="series1"
                x-axis-name="xAxis"
                y-axis-name="yAxis"
                display-type="OHLC"
                high-member-path="High"
                low-member-path="Low"
                close-member-path="Close"
                open-member-path="Open"
                volume-member-path="Volume">
            </igc-financial-price-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

¿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 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:

isHorizontalZoomEnabled
isVerticalZoomEnabled
SyncChannel
SynchronizeHorizontally
SynchronizeVertically
IgcDataChartComponent