Angular チャート同期化

$ ProductName$ データ チャートを使用すると、複数のチャート間のズーム、パン、および十字線イベントの調整に関して同期をとることができます。これは、データ ソースが軸に関して似ているか同じであると仮定して、複数のチャートの同じ領域を視覚化するのに役立ちます。

60 以上のリアルタイム Angular チャート を使用して、何百万ものデータ ポイントを描画し、視覚化を構築します。これは、あらゆるアプリケーション シナリオに対応する最も広範なチャート ライブラリです。

無料で試してみる

Angular チャート同期化の例

このサンプルは、2 つの 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コピー

/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scssコピー

Edit in: Codesandbox

このサンプルが気に入りましたか? 完全な Ignite UI for Angularツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

チャート同期化のプロパティ

チャートの同期にはデフォルトで 4 つのオプションがあり、水平方向のみ、垂直方向のみ、その両方を同期、あるいは同期なしを選択することもできます。

チャートのセットを同期する場合は、それらに SyncChannel プロパティに同じ名前を割り当ててから、SynchronizeHorizontally と SynchronizeVertically プロパティを対応するブール値に設定して、チャートを水平または垂直に同期するかどうかを指定できます。

垂直または水平に同期するには、isHorizontalZoomEnabled または isVerticalZoomEnabled プロパティをそれぞれ true に設定する必要があります。他のチャートに依存している同期チャートは、このプロパティ設定に関係なく、ズームできます。

API リファレンス

以下は、上記のセクションで説明した API メンバーのリストです。

• isHorizontalZoomEnabled
• isVerticalZoomEnabled
• SyncChannel
• SynchronizeHorizontally
• SynchronizeVertically
• IgxDataChartComponent