Web Components チャート機能

Ignite UI for Web Components チャートを使用すると、さまざまな機能を表示して、チャートで伝えられる完全なデータストーリーを表現できます。これらの各機能は完全にカスタマイズ可能であり、デザインのニーズにに合わせてスタイルを設定できるため、完全に制御できます。ハイライト表示や注釈などの操作により、重要なデータの詳細を呼び出すことができ、チャート内のより深いデータ分析が可能になります。

Web Components チャートは、次のチャート機能を提供します。

軸

異なる軸プロパティを使用して、X 軸と Y 軸の両方のすべての側面を変更またはカスタマイズします。グリッド線を表示したり、目盛りのスタイルをカスタマイズしたり、軸のタイトルを変更したり、軸の位置や交差値を変更したりすることもできます。Web Components チャートのカスタマイズについての詳細には、軸グリッド線、軸レイアウト、および軸オプションのトピックをご覧ください。

// data chart's modules:
import { IgcDataChartCoreModule, IgcDataChartScatterModule, IgcDataChartScatterCoreModule, IgcDataChartInteractivityModule,
         IgcDataChartComponent, IgcLegendComponent, IgcNumericXAxisComponent, IgcNumericYAxisComponent } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';

ModuleManager.register(
    IgcDataChartCoreModule,
    IgcDataChartScatterModule,
    IgcDataChartScatterCoreModule,
    IgcDataChartInteractivityModule,
);

export class DataChartAxisCrossing {

    private chart: IgcDataChartComponent;
    private xAxis: IgcNumericXAxisComponent;
    private yAxis: IgcNumericYAxisComponent;
    private xAxisCrossLabel: HTMLLabelElement;
    private yAxisCrossLabel: HTMLLabelElement;

    private data: any[] = [];

    constructor() {
        this.onXAxisSliderChanged = this.onXAxisSliderChanged.bind(this);
        this.onYAxisSliderChanged = this.onYAxisSliderChanged.bind(this);

        this.initData();

        this.chart = document.getElementById('chart') as IgcDataChartComponent;

        this.xAxis = document.getElementById("xAxis") as IgcNumericXAxisComponent;
        this.yAxis = document.getElementById("yAxis") as IgcNumericYAxisComponent;

        this.xAxis.crossingAxis = this.yAxis;
        this.yAxis.crossingAxis = this.xAxis;

        this.xAxisCrossLabel = document.getElementById("xAxisCrossLabel") as HTMLLabelElement;
        this.yAxisCrossLabel = document.getElementById("yAxisCrossLabel") as HTMLLabelElement;

        const xAxisSlider = document.getElementById("xAxisCrossingSlider") as HTMLInputElement;
        xAxisSlider.addEventListener("input", this.onXAxisSliderChanged);

        const yAxisSlider = document.getElementById("yAxisCrossingSlider") as HTMLInputElement;
        yAxisSlider.addEventListener("input", this.onYAxisSliderChanged);

        this.chart.dataSource = this.data;
    }

    public initData() {

        for (let i = -360; i <= 360; i += 10) {
            const radians = (i * Math.PI) / 180;
            const sin = Math.sin(radians);
            const cos = Math.cos(radians);
            this.data.push({ X: i, sinValue: sin, cosValue: cos });
        }
    }

    public onXAxisSliderChanged(e: any) {
        const value = e.target.value;
        this.yAxis.crossingValue = value;
        this.xAxisCrossLabel.textContent = value;
    }

    public onYAxisSliderChanged(e: any) {
        const value = e.target.value;
        this.xAxis.crossingValue = value;
        this.yAxisCrossLabel.textContent = value;
    }
}

new DataChartAxisCrossing();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>DataChartAxisCrossing</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="options horizontal">
      <label class="option-label">X-Axis Crossing Value: </label>
      <label class="options-value" id="xAxisCrossLabel">0</label>
      <input class="options-slider" id="xAxisCrossingSlider" type="range" min="-360" max="360" step="10" value="0"/>
      <label class="option-label">Y-Axis Crossing Value: </label>
      <label class="options-value" id="yAxisCrossLabel">0</label>
      <input class="options-slider" id="yAxisCrossingSlider" type="range" min="-1.25" max="1.25" step="0.125" value="0"/>
    </div>

    <div class="container"  style="height: calc(100% - 3rem)">
        <igc-data-chart id="chart" width="100%" height="100%" is-horizontal-zoom-enabled="true"
                        is-vertical-zoom-enabled="true" plot-area-margin-bottom="60" plot-area-margin-top="60"
                        plot-area-margin-left="30" plot-area-margin-right="30">
            <igc-numeric-x-axis id="xAxis" name="xAxis" interval="40" minimum-value="-360" maximum-value="360"
                                label-location="InsideBottom" label-top-margin="10" crossing-axis-name="yAxis"
                                crossing-value="0" stroke-thickness="1" stroke="Black">
            </igc-numeric-x-axis>
            <igc-numeric-y-axis id="yAxis" name="yAxis" minimum-value="-1.25" maximum-value="1.25" interval="0.25"
                                label-location="InsideLeft" label-right-margin="10" crossing-axis-name="xAxis"
                                crossing-value="0" stroke-thickness="1" stroke="Black">
            </igc-numeric-y-axis>

            <igc-scatter-spline-series x-axis-name="xAxis" y-axis-name="yAxis" marker-type="Circle" x-member-path="X" y-member-path="sinValue"></igc-scatter-spline-series>
            <igc-scatter-spline-series x-axis-name="xAxis" y-axis-name="yAxis" marker-type="Circle" x-member-path="X" y-member-path="cosValue"></igc-scatter-spline-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

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

注釈

これらの追加のレイヤーは、マウス/タッチに依存するほかのチャートレイヤーの上にあります。個別にまたは組み合わせて使用すると、チャート内の特定の値を強調するのに役立つ強力な操作を提供します。この機能の詳細については、チャート注釈トピックを参照してください。

import { IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';
import { IgcMarkerTypeCollection } from 'igniteui-webcomponents-charts';
import { MarkerType } from 'igniteui-webcomponents-charts';
import { CrosshairsDisplayMode } from 'igniteui-webcomponents-charts';

ModuleManager.register(IgcCategoryChartModule);

export class Sample {

    private chart: IgcCategoryChartComponent;
    public includedProperties: string[] = ["Year", "USA"];
    public data: any[] = [];

    constructor() {

        this.onCrosshairsVisible = this.onCrosshairsVisible.bind(this);
        this.onCalloutsVisible = this.onCalloutsVisible.bind(this);
        this.onFinalValuesVisible = this.onFinalValuesVisible.bind(this);
        this.onMarkersVisible = this.onMarkersVisible.bind(this);

        this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
        this.initData();
        this.chart.dataSource = this.data;

        this.chart.includedProperties = this.includedProperties;

        let checkbox1 = document.getElementById('checkbox1');
        checkbox1!.addEventListener('change', this.onCrosshairsVisible);

        let checkbox2 = document.getElementById('checkbox2');
        checkbox2!.addEventListener('change', this.onCalloutsVisible);

        let checkbox3 = document.getElementById('checkbox3');
        checkbox3!.addEventListener('change', this.onFinalValuesVisible);

        let checkbox4 = document.getElementById('checkbox4');
        checkbox4!.addEventListener('change', this.onMarkersVisible);
    }

    public initData() {
        this.data = [
            { Year: "2009", USA: 19 },
            { Year: "2010", USA: 24 },
            { Year: "2011", USA: 28 },
            { Year: "2012", USA: 26 },
            { Year: "2013", USA: 38 },
            { Year: "2014", USA: 31 },
            { Year: "2015", USA: 19 },
            { Year: "2016", USA: 52 },
            { Year: "2017", USA: 50 },
            { Year: "2018", USA: 34 },
            { Year: "2019", USA: 38 },
        ];

        let idx: number = 0;

        for (const item of this.data) {
            item.index = idx;
            item.value = item.USA;
            item.label = item.USA + " " + "TWh";
            idx++;
        }
    }

    public onCrosshairsVisible = (e: any) => {
        const isVisible = e.target.checked;
        this.chart.crosshairsAnnotationEnabled = isVisible;

        if (isVisible) {
            this.chart.crosshairsDisplayMode = CrosshairsDisplayMode.Both;
        }
        else {
            this.chart.crosshairsDisplayMode = CrosshairsDisplayMode.None;
        }
    }

    public onCalloutsVisible = (e: any) => {

        let value = e.target.checked;
        this.chart.calloutsVisible = value;
    }

    public onFinalValuesVisible = (e: any) => {

        let value = e.target.checked;
        this.chart.finalValueAnnotationsVisible = value;
    }

    public onMarkersVisible = (e: any) => {
        const visible = e.target.checked;
        const markers = e.target.checked ? 'Circle' : 'None';

        switch (markers) {
            case 'Circle': {
                let collection: IgcMarkerTypeCollection = new IgcMarkerTypeCollection();
                collection.add(MarkerType.Circle);
                this.chart.markerTypes = collection;
                break;
            }
            case 'None': {
                let collection: IgcMarkerTypeCollection = new IgcMarkerTypeCollection();
                collection.add(MarkerType.None);
                this.chart.markerTypes = collection;
                break;
            }
        }
    }
}

new Sample();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>CategoryChartLineChartWithAnnotations</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="options horizontal">
        <label class="options-label">Annotations: </label>
        <label class="options-label"><input type="checkbox" id="checkbox1" checked="true"></input> Crosshair </label>
        <label class="options-label"><input type="checkbox" id="checkbox2" checked="true"></input> Callouts </label>
        <label class="options-label"><input type="checkbox" id="checkbox3" checked="true"></input> Final Values </label>
        <label class="options-label"><input type="checkbox" id="checkbox4" checked="true"></input> Markers </label>
    </div>
    <div class="container fill" style="height: calc(100% - 1.25rem)">
      <igc-category-chart id="chart"
          width="100%" height="100%"
          chart-type="Line"
          subtitle="Renewable Electricity Generated"
          is-horizontal-zoom-enabled="false"
          is-vertical-zoom-enabled="false"
          yAxisTitle="TWh"
          y-axis-label-location="OutsideRight"
          thickness="2"
          callouts-visible="true"
          callouts-x-member-path="index"
          callouts-y-member-path="value"
          callouts-label-member-path="label"
          crosshairs-snap-to-data="false"
          crosshairs-display-mode="Both"
          crosshairs-annotation-enabled="true"
          final-value-annotations-visible="true"
          marker-types="Circle"
		  computed-plot-area-margin-mode="Series">
        </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

アニメーション

アニメーションを有効にして、新しいデータソースを読み込むときにチャートをアニメーション化します。これらは、さまざまなタイプのアニメーションとそれらのアニメーションが実行される速度を設定することでカスタマイズできます。この機能の詳細については、チャートアニメーショントピックを参照してください。

import { IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';

ModuleManager.register(
    IgcCategoryChartModule
);

export class CategoryChartLineChartWithAnimations {

    private chart: IgcCategoryChartComponent;
    private transitionLabel: HTMLLabelElement;

    public data: any[] = [];

    constructor() {

        this.onAnimationChanged = this.onAnimationChanged.bind(this);
        this.onTransitionTimeChanged = this.onTransitionTimeChanged.bind(this);
        this.onReloadChartBtnClicked = this.onReloadChartBtnClicked.bind(this);
        this.reloadChart = this.reloadChart.bind(this);

        this.initData();

        this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
        this.chart.dataSource = this.data;

        const animationSelect = document.getElementById("animationSelect") as HTMLSelectElement;
        animationSelect.addEventListener("change", this.onAnimationChanged);

        this.transitionLabel = document.getElementById("transitionLabel") as HTMLLabelElement;

        const transitionSlider = document.getElementById("transitionSlider") as HTMLInputElement;
        transitionSlider.addEventListener("change", this.onTransitionTimeChanged);

        const reloadChartButton = document.getElementById("reloadChartBtn") as HTMLButtonElement;
        reloadChartButton.addEventListener("click", this.onReloadChartBtnClicked);
    }

    public initData() {
        this.data = [
            { Year: "2009", Europe: 31, China: 21, USA: 19 },
            { Year: "2010", Europe: 43, China: 26, USA: 24 },
            { Year: "2011", Europe: 66, China: 29, USA: 28 },
            { Year: "2012", Europe: 69, China: 32, USA: 26 },
            { Year: "2013", Europe: 58, China: 47, USA: 38 },
            { Year: "2014", Europe: 40, China: 46, USA: 31 },
            { Year: "2015", Europe: 78, China: 50, USA: 19 },
            { Year: "2016", Europe: 13, China: 90, USA: 52 },
            { Year: "2017", Europe: 78, China: 132, USA: 50 },
            { Year: "2018", Europe: 40, China: 134, USA: 34 },
            { Year: "2019", Europe: 80, China: 96, USA: 38 }
        ];
    }

    public onAnimationChanged(e: any) {
        this.chart.transitionInMode = e.target.value;
        this.reloadChart();
    }

    public onTransitionTimeChanged(e: any) {
        this.chart.transitionInDuration = e.target.value;
        this.transitionLabel.textContent = e.target.value + "ms";
        this.reloadChart();
    }

    public onReloadChartBtnClicked(e: any) {
        this.reloadChart();
    }

    public reloadChart() {
        this.chart.replayTransitionIn();
    }
}

new CategoryChartLineChartWithAnimations();
ts

<!DOCTYPE html>
<html>

<head>
  <title>CategoryChartLineChartWithAnimations</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="options horizontal">
        <span class="options-label">Transition Type </span>
        <select id="animationSelect">
            <option>Auto</option>
            <option>AccordionFromBottom</option>
            <option>AccordionFromCategoryAxisMaximum</option>
            <option>AccordionFromCategoryAxisMinimum</option>
            <option>AccordionFromLeft</option>
            <option>AccordionFromRight</option>
            <option>AccordionFromTop</option>
            <option>AccordionFromValueAxisMaximum</option>
            <option>AccordionFromValueAxisMinimum</option>
            <option>Expand</option>
            <option>FromZero</option>
            <option>SweepFromBottom</option>
            <option>SweepFromCategoryAxisMaximum</option>
            <option>SweepFromCategoryAxisMinimum</option>
            <option>SweepFromCenter</option>
            <option>SweepFromLeft</option>
            <option>SweepFromRight</option>
            <option>SweepFromTop</option>
            <option>SweepFromValueAxisMaximum</option>
            <option>SweepFromValueAxisMinimum</option>
        </select>
        <label id="transitionLabel" class="options-value" style="width: 75px">1000ms</label>
        <input id="transitionSlider" class="options-slider" type="range" min="50" max="2000" step="50" value="1000" />
        <button id="reloadChartBtn">Reload Chart</button>
      </div>

      <igc-category-chart id="chart" width="100%" height="calc(100% - 30px)"
           chart-type="Line"
           is-transition-in-enabled="true"
           is-horizontal-zoom-enabled="false"
           is-vertical-zoom-enabled="false"
           y-axis-title="TWh"
           y-axis-title-left-margin="10"
           y-axis-title-right-margin="5"
           y-axis-label-left-margin="0"
		   computed-plot-area-margin-mode="Series">
      </igc-category-chart>
    </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

ハイライト表示

線、列、マーカーなどのビジュアルに、マウスをデータ項目の上に置いたときにハイライト表示して、フォーカスを合わせます。この機能は、すべてのチャートタイプで有効になっています。この機能の詳細については、チャートのハイライト表示トピックを参照してください。

import { SeriesHighlightingBehavior, LegendHighlightingMode, SeriesHighlightingMode, IgcLegendModule, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';

ModuleManager.register(IgcCategoryChartModule, IgcLegendModule);

export class CategoryChartHighlighting {

    private chart: IgcCategoryChartComponent;
    private legend: IgcLegendComponent
    public data: any[] = [];

    constructor() {

        this.onHighlightingTargetChanged = this.onHighlightingTargetChanged.bind(this);
        this.onHighlightingModeChanged = this.onHighlightingModeChanged.bind(this);
        this.onBehaviorModeChanged = this.onBehaviorModeChanged.bind(this);
        this.onLegendHighlightingModeChanged = this.onLegendHighlightingModeChanged.bind(this);

        this.initData();

        this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
        this.chart.dataSource = this.data;
        this.legend = document.getElementById('Legend') as IgcLegendComponent;
        this.chart.legend = this.legend
        this.chart.isItemHighlightingEnabled = false;
        this.chart.isSeriesHighlightingEnabled = true;
        this.chart.isCategoryHighlightingEnabled = false;
        this.chart.highlightingMode = SeriesHighlightingMode.Auto;
        this.chart.highlightingBehavior = SeriesHighlightingBehavior.Auto;
        this.chart.legendHighlightingMode = LegendHighlightingMode.Auto;

        const highlightingTarget1 = document.getElementById('highlightingTarget') as HTMLSelectElement;
        highlightingTarget1!.addEventListener('change', this.onHighlightingTargetChanged);

        const highlightingMode = document.getElementById("highlightingMode") as HTMLSelectElement;
        highlightingMode!.addEventListener("change", this.onHighlightingModeChanged);

        const behaviorMode = document.getElementById("behaviorMode") as HTMLSelectElement;
        behaviorMode!.addEventListener("change", this.onBehaviorModeChanged);

        const legendHighlightingMode = document.getElementById("legendHighlightingMode") as HTMLSelectElement;
        legendHighlightingMode!.addEventListener("change", this.onLegendHighlightingModeChanged);
    }

    public onHighlightingTargetChanged = (e: any) => {
        let value = e.target.value as String;

        if(value == "Series"){
            this.chart.isItemHighlightingEnabled = false;
            this.chart.isSeriesHighlightingEnabled = true;
            this.chart.isCategoryHighlightingEnabled = false;
        }
         else if(value == "Item") {
            this.chart.isItemHighlightingEnabled = true;
            this.chart.isSeriesHighlightingEnabled = false;
            this.chart.isCategoryHighlightingEnabled = false;
        }
         else if(value == "Category") {
            this.chart.isItemHighlightingEnabled = false;
            this.chart.isSeriesHighlightingEnabled = false;
            this.chart.isCategoryHighlightingEnabled = true;
        }
         else if(value=="None") {
            this.chart.isItemHighlightingEnabled = false;
            this.chart.isSeriesHighlightingEnabled = false;
            this.chart.isCategoryHighlightingEnabled = false;
        }
    }

    public onHighlightingModeChanged(e: any) {
        this.chart.highlightingMode = e.target.value as SeriesHighlightingMode;
    }

    public onBehaviorModeChanged(e: any) {
        this.chart.highlightingBehavior = e.target.value as SeriesHighlightingBehavior;
    }

    public onLegendHighlightingModeChanged(e: any) {
        this.chart.legendHighlightingMode = e.target.value as LegendHighlightingMode;
    }

    public initData() {
        const CityTemperatureData: any = [
            { Month: "JAN", NewYork: 10.6, LosAngeles: 28.3},
            { Month: "FEB", NewYork: 7.8,  LosAngeles: 31.1},
            { Month: "MAR", NewYork: 12.2, LosAngeles: 27.8},
            { Month: "APR", NewYork: 11.7, LosAngeles: 33.9},
            { Month: "MAY", NewYork: 19.4, LosAngeles: 35.0},
            { Month: "JUN", NewYork: 23.3, LosAngeles: 36.7},
            { Month: "JUL", NewYork: 27.2, LosAngeles: 33.3},
            { Month: "AUG", NewYork: 25.6, LosAngeles: 36.7},
            { Month: "SEP", NewYork: 22.8, LosAngeles: 43.9},
            { Month: "OCT", NewYork: 17.8, LosAngeles: 38.3 },
            { Month: "NOV", NewYork: 17.8, LosAngeles: 32.8},
            { Month: "DEC", NewYork: 8.3, LosAngeles: 28.9},
        ];
        this.data = [ CityTemperatureData];
    }

}

new CategoryChartHighlighting();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>CategoryChartColumnChartWithHighlighting</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="options horizontal">
        <label class="options-label">Highlight Target: </label>
        <select id="highlightingTarget">
          <option>Series</option>
          <option>Item</option>
          <option>Category</option>
          <option>None</option>
        </select>

        <span class="options-label">Mode:</span>
        <select id="highlightingMode">
          <option>Auto</option>
          <option>Brighten</option>
          <option>BrightenSpecific</option>
          <option>FadeOthers</option>
          <option>FadeOthersSpecific</option>
          <option>None</option>
        </select>
        <span class="options-label">Behavior:</span>
        <select id="behaviorMode">
          <option>Auto</option>
          <option>DirectlyOver</option>
          <option>NearestItems</option>
          <option>NearestItemsAndSeries</option>
          <option>NearestItemsRetainMainShapes</option>
        </select>
        <span class="options-label">Legend:</span>
        <select id="legendHighlightingMode">
          <option>Auto</option>
          <option>MatchSeries</option>
          <option>None</option>
        </select>
    </div>
    <div class="options vertical">
      <span class="legend-title">
         Average Temperatures in the U.S. Cities
      </span>
      <div class="legend">
          <igc-legend
          orientation="Horizontal"
          name="Legend"
          id ="Legend">
          </igc-legend>
      </div>
    </div>
    <igc-category-chart id="chart" style="height: calc(100% - 3rem)"
        width="100%"
        height="100%"
        x-axis-interval="1"
        y-axis-minimum-value="0"
        y-axis-title="Temperatures in Celsius"
        is-series-highlighting-enabled="true"
        is-category-highlighting-enabled="true"
        is-item-highlighting-enabled="true">
    </igc-category-chart>
</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

マーカー

チャートシリーズのマーカーを使用して値が主要なグリッド線の間にある場合でも、データポイントをすばやく識別します。これらは、スタイル、カラー、および形状で完全にカスタマイズ可能です。この機能の詳細については、チャートマーカートピックを参照してください。

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 { IgcCategoryChartModule, IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, CategoryChartDescriptionModule, DataChartInteractivityDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { IgcPropertyEditorPropertyDescriptionChangedEventArgs } from 'igniteui-webcomponents-layouts';
import { MarkerType, MarkerType_$type } from 'igniteui-webcomponents-charts';
import { EnumUtil } from 'igniteui-webcomponents-core';
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,
    IgcCategoryChartModule,
    IgcDataChartInteractivityModule
);

export class Sample {

    private propertyEditor: IgcPropertyEditorPanelComponent
    private chartTypeEditor: IgcPropertyEditorPropertyDescriptionComponent
    private markerTypeEditor: IgcPropertyEditorPropertyDescriptionComponent
    private chart: IgcCategoryChartComponent
    private _bind: () => void;

    constructor() {
        var propertyEditor = this.propertyEditor = document.getElementById('PropertyEditor') as IgcPropertyEditorPanelComponent;
        var chartTypeEditor = this.chartTypeEditor = document.getElementById('ChartTypeEditor') as IgcPropertyEditorPropertyDescriptionComponent;
        var markerTypeEditor = this.markerTypeEditor = document.getElementById('MarkerTypeEditor') as IgcPropertyEditorPropertyDescriptionComponent;
        this.editorChangeUpdateMarkerType = this.editorChangeUpdateMarkerType.bind(this);
        var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;

        this._bind = () => {
            propertyEditor.componentRenderer = this.renderer;
            propertyEditor.target = this.chart;
            markerTypeEditor.changed = this.editorChangeUpdateMarkerType;
            chart.dataSource = this.countryRenewableElectricity;
        }
        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);
            CategoryChartDescriptionModule.register(context);
            DataChartInteractivityDescriptionModule.register(context);
        }
        return this._componentRenderer;
    }

    public editorChangeUpdateMarkerType(sender: any, args: IgcPropertyEditorPropertyDescriptionChangedEventArgs): void {
        var item = sender as IgcPropertyEditorPropertyDescriptionComponent;
        var chart = this.chart;

        var markerVal = item.primitiveValue;
        chart.markerTypes = markerVal;
    }

}

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
        name="PropertyEditor"
        id="PropertyEditor"
        description-type="CategoryChart"
        is-horizontal="true"
        is-wrapping-enabled="true">
            <igc-property-editor-property-description
            property-path="ChartType"
            name="ChartTypeEditor"
            id="ChartTypeEditor"
            label="Chart Type"
            primitive-value="Line">
            </igc-property-editor-property-description>
            <igc-property-editor-property-description
            property-path="MarkerTypeHandler"
            name="MarkerTypeEditor"
            id="MarkerTypeEditor"
            label="Marker Type"
            should-override-default-editor="true"
            value-type="EnumValue"
            drop-down-values="Circle, Automatic, Triangle, Pyramid, Square, Diamond, Pentagon, Hexagon, Tetragram, Pentagram, Hexagram, None"
            drop-down-names="Circle, Automatic, Triangle, Pyramid, Square, Diamond, Pentagon, Hexagon, Tetragram, Pentagram, Hexagram, None"
            primitive-value="Circle">
            </igc-property-editor-property-description>
        </igc-property-editor-panel>
    </div>

    <div class="legend-title">
        Renewable Electricity Generated
    </div>

    <div class="container fill">
        <igc-category-chart
        name="chart"
        id="chart"
        is-series-highlighting-enabled="true"
        chart-type="Line"
        computed-plot-area-margin-mode="Series">
        </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



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 { ModuleManager } from 'igniteui-webcomponents-core';
// data chart's modules:
import { IgcDataChartComponent } from 'igniteui-webcomponents-charts';
import { IgcDataChartCoreModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartCategoryModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
// financial series modules:
import { IgcDataChartFinancialModule } from 'igniteui-webcomponents-charts';
// data chart's elements:
import { IgcNumericYAxisComponent } from 'igniteui-webcomponents-charts';
import { IgcCategoryXAxisComponent } from 'igniteui-webcomponents-charts';
import { IgcFinancialPriceSeriesComponent } from 'igniteui-webcomponents-charts';
import { InteractionState } from 'igniteui-webcomponents-core';
import { ModifierKeys } from 'igniteui-webcomponents-core';
import { SampleFinancialData } from './SampleFinancialData';

ModuleManager.register(
    IgcDataChartCoreModule,
    IgcDataChartCategoryModule,
    IgcDataChartFinancialModule,
    IgcDataChartInteractivityModule,
);

export class DataChartNavigation {

    private chart: IgcDataChartComponent;

    constructor() {

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

        this.chart.actualWindowScaleHorizontal = 0.60;
        this.chart.actualWindowScaleVertical = 0.60;
        this.chart.actualWindowPositionVertical = 0.20;
        this.chart.actualWindowPositionHorizontal = 0.20;

        const panUp = document.getElementById('panUp') as HTMLButtonElement;
        panUp!.addEventListener('click', this.onPanUpClick);

        const panLeft = document.getElementById('panLeft') as HTMLButtonElement;
        panLeft!.addEventListener('click', this.onPanLeftClick);

        const zoomIn = document.getElementById('zoomIn') as HTMLButtonElement;
        zoomIn!.addEventListener('click', this.onZoomInClick);

        const panDown = document.getElementById('panDown') as HTMLButtonElement;
        panDown!.addEventListener('click', this.onPanDownClick);

        const panRight = document.getElementById('panRight') as HTMLButtonElement;
        panRight!.addEventListener('click', this.onPanRightClick);

        const zoomOut = document.getElementById('zoomOut') as HTMLButtonElement;
        zoomOut!.addEventListener('click', this.onZoomOutClick);

        const panModSelect = document.getElementById('panModSelect') as HTMLSelectElement;
        panModSelect!.value = 'Alt';
        panModSelect!.addEventListener('change', this.onPanModifierChange);

        const interactionSelect = document.getElementById('interactionSelect') as HTMLSelectElement;
        interactionSelect!.value = 'DragPan';
        interactionSelect!.addEventListener('change', this.onDefaultInteractionChange);

        const dragModSelect = document.getElementById('dragModSelect') as HTMLSelectElement;
        dragModSelect!.value = 'Shift';
        dragModSelect!.addEventListener('change', this.onDragModifierChange);

        const zoomEnabled = document.getElementById('zoomEnabled') as HTMLInputElement;
        zoomEnabled!.checked = true;
        zoomEnabled!.addEventListener('change', this.onZoomEnabledChange);
    }

    public onDefaultInteractionChange = (e: any) => {
        switch (e.target.value) {
            case 'DragZoom':
                this.chart.defaultInteraction = InteractionState.DragZoom;
                break;
            case 'DragPan':
                this.chart.defaultInteraction = InteractionState.DragPan;
                break;
            case 'None':
                this.chart.defaultInteraction = InteractionState.None;
                break;
        }
    }

    public onPanModifierChange = (e: any) => {
        switch (e.target.value) {
            case 'Alt':
                this.chart.panModifier = ModifierKeys.Alt;
                break;
            case 'Control':
                this.chart.panModifier = ModifierKeys.Control;
                break;
            case 'Shift':
                this.chart.panModifier = ModifierKeys.Shift;
                break;
            case 'Windows':
                this.chart.panModifier = ModifierKeys.Windows;
                break;
            case 'Apple':
                this.chart.panModifier = ModifierKeys.Apple;
                break;
            case 'None':
                this.chart.panModifier = ModifierKeys.None;
                break;
        }
    }

    public onDragModifierChange = (e: any) => {
        switch (e.target.value) {
            case 'Alt':
                this.chart.dragModifier = ModifierKeys.Alt;
                break;
            case 'Control':
                this.chart.dragModifier = ModifierKeys.Control;
                break;
            case 'Shift':
                this.chart.dragModifier = ModifierKeys.Shift;
                break;
            case 'Windows':
                this.chart.dragModifier = ModifierKeys.Windows;
                break;
            case 'Apple':
                this.chart.dragModifier = ModifierKeys.Apple;
                break;
            case 'None':
                this.chart.dragModifier = ModifierKeys.None;
                break;
        }
    }

    public onZoomEnabledChange = (e: any) => {
        const isZoomEnabled = e.target.checked;
        this.chart.isHorizontalZoomEnabled = isZoomEnabled;
        this.chart.isVerticalZoomEnabled = isZoomEnabled;
    }

    public onPanUpClick = (e: any) => {
        this.chart.actualWindowPositionVertical -= 0.05;
    }

    public onPanDownClick = (e: any) => {
        this.chart.actualWindowPositionVertical += 0.05;
    }

    public onPanLeftClick = (e: any) => {
        this.chart.actualWindowPositionHorizontal -= 0.05;
    }

    public onPanRightClick = (e: any) => {
        this.chart.actualWindowPositionHorizontal += 0.05;
    }

    public onZoomOutClick = (e: any) => {
        if (this.chart.actualWindowPositionHorizontal > 0.025) {
            this.chart.actualWindowPositionHorizontal -= 0.025;
        }
        if (this.chart.actualWindowPositionVertical > 0.025) {
            this.chart.actualWindowPositionVertical -= 0.025;
        }

        if (this.chart.actualWindowScaleHorizontal < 1.0) {
            this.chart.actualWindowScaleHorizontal += 0.05;
        }
        if (this.chart.actualWindowScaleVertical < 1.0) {
            this.chart.actualWindowScaleVertical += 0.05;
        }
    }

    public onZoomInClick = (e: any) => {
        if (this.chart.actualWindowPositionHorizontal < 1.0) {
            this.chart.actualWindowPositionHorizontal += 0.025;
        }
        if (this.chart.actualWindowPositionVertical < 1.0) {
            this.chart.actualWindowPositionVertical += 0.025;
        }

        if (this.chart.actualWindowScaleHorizontal > 0.05) {
            this.chart.actualWindowScaleHorizontal -= 0.05;
        }
        if (this.chart.actualWindowScaleVertical > 0.05) {
            this.chart.actualWindowScaleVertical -= 0.05;
        }
    }
}

new DataChartNavigation();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>DataChartNavigation</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="options horizontal">
        <div class="options vertical" style="width: 100px">
            <button id="panUp">Pan Up</button>
            <button id="panDown">Pan Down</button>
        </div>
        <div class="options vertical" style="width: 100px">
            <button id="panLeft">Pan Left</button>
            <button id="panRight">Pan Right</button>
        </div>
        <div class="options vertical" style="width: 100px">
            <button id="zoomIn">Zoom In</button>
            <button id="zoomOut">Zoom Out</button>
        </div>
        <div class="options vertical" style="width: 120px; align-self: center">
            <label class="options-label" style="margin: 5px">Pan Modifier:</label>
            <label class="options-label" style="margin: 5px">Zoom Modifier:</label>
        </div>
        <div class="options vertical" style="width: 100px">
            <select id="panModSelect" style="margin: 5px">
                <option>Alt</option>
                <option>Control</option>
                <option>Shift</option>
                <option>Windows</option>
                <option>Apple</option>
                <option>None</option>
            </select>
            <select id="dragModSelect" style="margin: 5px">
                <option>Alt</option>
                <option>Control</option>
                <option>Shift</option>
                <option>Windows</option>
                <option>Apple</option>
                <option>None</option>
            </select>
        </div>
        <div class="options vertical" style="width: 150px; align-self: center">
            <label class="options-label" style="margin: 5px;">Interaction:</label>
            <label class="options-label" style="margin: 5px;">Zooming:</label>
        </div>
        <div class="options vertical" style="width: 100px">
            <select id="interactionSelect" style="margin: 5px">
                <option>DragZoom</option>
                <option>DragPan</option>
                <option>None</option>
            </select>
            <input id="zoomEnabled" class="options-item" type="checkbox" @onchange="OnEnableZoomingChange" checked="@IsZoomingEnabled" />
        </div>
    </div>

    <div class="container vertical">
        <igc-data-chart
            id="chart"
            width="100%"
            height="100%"
            subtitle="Stock Prices Series in Candlestick Display Type"
            subtitle-top-margin="10"
            is-horizontal-zoom-enabled="true"
            is-vertical-zoom-enabled="true"
            pan-modifier="Alt"
            drag-modifier="Shift"
            default-interaction="DragPan">
            <igc-category-x-axis
                name="xAxis"
                label="Label"></igc-category-x-axis>
            <igc-numeric-y-axis
                name="yAxis"
                title="Amount (in USD)"
                title-right-margin="10"
                label-right-margin="10"
                label-horizontal-alignment="Left"
                label-location="OutsideRight"></igc-numeric-y-axis>
            <igc-financial-price-series
                x-axis-name="xAxis"
                y-axis-name="yAxis"
                display-type="Candlestick"
                open-member-path="Open"
                close-member-path="Close"
                high-member-path="High"
                low-member-path="Low"
                volume-member-path="Volume"
                show-default-tooltip="true"
                is-transition-in-enabled="true"
                title="Price"></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

オーバーレイ

オーバーレイを使用すると、チャートに水平線または垂直線をプロットして、重要な値としきい値に注釈を付けることができます。この機能の詳細については、チャートオーバーレイトピックを参照してください。

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 { IgcColumnSeriesModule } from 'igniteui-webcomponents-charts';
import { IgcValueOverlayModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartComponent } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';

ModuleManager.register(
    IgcDataChartCoreModule,
    IgcDataChartCategoryCoreModule,
    IgcDataChartCategoryModule,
    IgcDataChartInteractivityModule,
    IgcColumnSeriesModule,
    IgcValueOverlayModule
);

export class DataChartSeriesValueOverlay {

    private chart: IgcDataChartComponent;

    constructor() {

        this.chart = document.getElementById('chart') as IgcDataChartComponent;
        this.chart.dataSource = this.getData();
    }

    getData(): any[] {
        const data = [
            { 'Label': 1, 'Value': 1.0 },
            { 'Label': 2, 'Value': 2.0 },
            { 'Label': 3, 'Value': 6.0 },
            { 'Label': 4, 'Value': 8.0 },
            { 'Label': 5, 'Value': 2.0 },
            { 'Label': 6, 'Value': 6.0 },
            { 'Label': 7, 'Value': 4.0 },
            { 'Label': 8, 'Value': 2.0 },
            { 'Label': 9, 'Value': 1.0 },
        ];

        return data;
    }
}

new DataChartSeriesValueOverlay();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>DataChartSeriesValueOverlay</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="chart" width="100%" height="100%"
        is-horizontal-zoom-enabled="true"
        is-vertical-zoom-enabled="true">

            <igc-category-x-axis name="xAxis" label="Label">
            </igc-category-x-axis>
            <igc-numeric-y-axis name="yAxis" minimum-value="0" maximum-value="10">
            </igc-numeric-y-axis>

            <igc-column-series name="series1" x-axis-name="xAxis" y-axis-name="yAxis" value-member-path="Value">
            </igc-column-series>

            <igc-value-overlay name="overlay1" axis-name="yAxis" value="2.0" thickness="5">
            </igc-value-overlay>
            <igc-value-overlay name="overlay2" axis-name="yAxis" value="3.6" thickness="5">
            </igc-value-overlay>
            <igc-value-overlay name="overlay3" axis-name="yAxis" value="5.8" thickness="5">
            </igc-value-overlay>
            <igc-value-overlay name="overlay4" axis-name="yAxis" value="1.0" thickness="5">
            </igc-value-overlay>
            <igc-value-overlay name="overlay5" axis-name="yAxis" value="8.0" thickness="5">
            </igc-value-overlay>
            <igc-value-overlay name="overlay6" axis-name="yAxis" value="7.0" thickness="5">
            </igc-value-overlay>
            <igc-value-overlay name="overlay7" axis-name="yAxis" value="5.0" thickness="5">
            </igc-value-overlay>
        </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

パフォーマンス

Web Components チャートは、数百万のデータポイントを描画し、それらを数ミリ秒ごとに更新する高性能のために最適化されています。ただし、チャートのパフォーマンスに影響を与えるいくつかのチャート機能があり、アプリケーションのパフォーマンスを最適化するときにそれらを考慮する必要があります。この機能の詳細については、チャートパフォーマンストピックを参照してください。



export class CategoryChartSharedData {

    public static generateItems(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 v = Math.abs(Math.round(value * 10) / 10);
            data.push({ Label: i.toString(), Value: v });
        }
        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 { IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';
import { CategoryChartSharedData } from './CategoryChartSharedData';

ModuleManager.register(IgcCategoryChartModule);

export class CategoryChartHighVolume {

    private chart: IgcCategoryChartComponent;
    public dataPoints: number = 500000;

    public dataInfo: string = CategoryChartSharedData.toShortString(this.dataPoints);
    public data: any[] = [];
    private dataInfoLabel: HTMLLabelElement;

    constructor() {

        this.onDataPointsChanged = this.onDataPointsChanged.bind(this);
        this.onDataGenerateClick = this.onDataGenerateClick.bind(this);

        this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
        this.chart.dataSource = CategoryChartSharedData.generateItems(0, this.dataPoints, true);

        let slider1 = document.getElementById('dataPointsSlider') as HTMLInputElement;
        slider1!.addEventListener('change', this.onDataPointsChanged);

        let DataGenerate1 = document.getElementById('DataGenerate') as HTMLButtonElement;
        DataGenerate1!.addEventListener('click', this.onDataGenerateClick);
    }

    public onDataPointsChanged = (e: any) => {
        this.dataPoints = e.target.value;
        const info = CategoryChartSharedData.toShortString(this.dataPoints);
        this.dataPoints = this.dataPoints;
        this.dataInfo = info;

        this.dataInfoLabel = document.getElementById('dataInfoLabel') as HTMLLabelElement;
        this.dataInfoLabel.textContent = this.dataPoints.toString();
    }

    public onDataGenerateClick = (e: any) => {
        if (this.dataPoints === undefined) {
            this.dataPoints = 10000;
        }
        this.generateData();
    }

    public generateData() {
        this.chart.dataSource = CategoryChartSharedData.generateItems(0, this.dataPoints, true);
    }
}

new CategoryChartHighVolume();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>CategoryChartHighVolume</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="options horizontal">
        <label class="options-label">Data Points: </label>
        <label class="options-value" id="dataInfoLabel"> 500000 </label>
        <input id="dataPointsSlider" class="options-slider" type="range" min="10000" max="1000000" step="1000"
            value=500000 />
        <button id="DataGenerate">Generate Data</button>
    </div>
    <igc-category-chart id="chart"
        width="100%"
        height="calc(100% - 3rem)"
        chart-type="Line"
        tool-tip-type="Default"
        y-axis-extent="60"
        x-axis-enhanced-interval-prefer-more-category-labels="false"
        should-consider-auto-rotation-for-initial-labels="false"
        should-auto-expand-margin-for-initial-labels="false"
        crosshairs-display-mode="None"
        auto-margin-and-angle-update-mode="None"
        marker-types="None" >
    </igc-category-chart>
</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

ツールチップ

ツールチップを使用して、特定のシリーズタイプに関連するすべての情報を表示します。項目レベルやカテゴリレベルのツールチップなど、有効にできるさまざまなツールチップがあります。この機能の詳細については、チャートツールチップトピックを参照してください。

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 { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import { IgcLegendModule, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies';
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 propertyEditor: IgcPropertyEditorPanelComponent
    private toolTipTypeEditor: IgcPropertyEditorPropertyDescriptionComponent
    private legend: IgcLegendComponent
    private chart: IgcCategoryChartComponent
    private _bind: () => void;

    constructor() {
        var propertyEditor = this.propertyEditor = document.getElementById('PropertyEditor') as IgcPropertyEditorPanelComponent;
        var toolTipTypeEditor = this.toolTipTypeEditor = document.getElementById('ToolTipTypeEditor') as IgcPropertyEditorPropertyDescriptionComponent;
        var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
        var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;

        this._bind = () => {
            propertyEditor.componentRenderer = this.renderer;
            propertyEditor.target = this.chart;
            chart.legend = this.legend;
            chart.dataSource = this.highestGrossingMovies;
        }
        this._bind();
    }

    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;
    }

}

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
        name="PropertyEditor"
        id="PropertyEditor"
        description-type="CategoryChart"
        is-horizontal="true"
        is-wrapping-enabled="true">
            <igc-property-editor-property-description
            property-path="ToolTipType"
            name="ToolTipTypeEditor"
            id="ToolTipTypeEditor"
            label="ToolTip Type: "
            primitive-value="Data">
            </igc-property-editor-property-description>
        </igc-property-editor-panel>
    </div>

    <div class="legend-title">
        Highest Grossing Movie Franchises
    </div>

    <div class="legend">
        <igc-legend
        name="legend"
        id="legend">
        </igc-legend>
    </div>

    <div class="container fill">
        <igc-category-chart
        name="chart"
        id="chart"
        chart-type="Column"
        x-axis-interval="1"
        y-axis-title="Billions of U.S. Dollars"
        y-axis-title-left-margin="10"
        y-axis-title-right-margin="5"
        y-axis-label-left-margin="0"
        is-horizontal-zoom-enabled="false"
        is-vertical-zoom-enabled="false"
        crosshairs-snap-to-data="true">
        </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

トレンドライン

トレンドラインを使用して、トレンドを特定したり、データ内のパターンを見つけたりします。Web Components チャートでは、CubicFit や LinearFit など、さまざまなトレンドラインがサポートされています。この機能の詳細については、チャートトレンドライントピックを参照してください。



export class StocksHistory {
  /** gets stock OHLC prices for multiple stocks */

  public static async getMultipleStocks(): Promise<any[]> {
    // getting prices of multiples stocks asynchronously
    const dataSources: any[] = [
      //await this.getAmazonStock(),
      await this.getGoogleStock(),
      await this.getMicrosoftStock(),
      //await this.getTeslaStock()
    ];

    return new Promise<any[]>((resolve, reject) => {
      resolve(dataSources);
    });
  }

  /** gets Amazon stock OHLC prices from a .JSON file */
  public static async getAmazonStock(): Promise<StockItem[]> {
    let url = "https://static.infragistics.com/xplatform/data/stocks/stockAmazon.json";
    let response = await fetch(url);
    let jsonData = await response.json();
    let stockData = this.convertData(jsonData);
    // setting data intent for Series Title, e.g. FinancialChart usage
    (stockData as any).__dataIntents = {
      close: ["SeriesTitle/Amazon"]
    };
    // console.log("fetchAmazonStock: ", stockData.length);

    return new Promise<StockItem[]>((resolve, reject) => {
      resolve(stockData);
    });
  }

  /** gets Tesla stock OHLC prices from a .JSON file */
  public static async getTeslaStock(): Promise<StockItem[]> {
    let url = "https://static.infragistics.com/xplatform/data/stocks/stockTesla.json";
    let response = await fetch(url);
    let jsonData = await response.json();
    let stockData = this.convertData(jsonData);
    // setting data intent for Series Title, e.g. FinancialChart usage
    (stockData as any).__dataIntents = {
      close: ["SeriesTitle/Tesla"]
    };
    return new Promise<StockItem[]>((resolve, reject) => {
      resolve(stockData);
    });
  }

  /** gets Microsoft stock OHLC prices from a .JSON file */
  public static async getMicrosoftStock(): Promise<StockItem[]> {
    let url = "https://static.infragistics.com/xplatform/data/stocks/stockMicrosoft.json";
    let response = await fetch(url);
    let jsonData = await response.json();
    let stockData = this.convertData(jsonData);
    // setting data intent for Series Title, e.g. FinancialChart usage
    (stockData as any).__dataIntents = {
      close: ["SeriesTitle/Microsoft"]
    };
    return new Promise<StockItem[]>((resolve, reject) => {
      resolve(stockData);
    });
  }

  /** gets Google stock OHLC prices from a .JSON file */
  public static async getGoogleStock(): Promise<StockItem[]> {
    let url = "https://static.infragistics.com/xplatform/data/stocks/stockGoogle.json";
    let response = await fetch(url);
    let jsonData = await response.json();
    let stockData = this.convertData(jsonData);
    // setting data intent for Series Title, e.g. FinancialChart usage
    (stockData as any).__dataIntents = {
      close: ["SeriesTitle/Google"]
    };
    return new Promise<StockItem[]>((resolve, reject) => {
      resolve(stockData);
    });
  }

  public static convertData(jsonData: any[]): StockItem[] {
    let stockItems: StockItem[] = [];

    for (let json of jsonData) {
      let parts = json.date.split("-"); // "2020-01-01"
      let item = new StockItem();
      item.date = new Date(parts[0], parts[1], parts[2]);
      item.open = json.open;
      item.high = json.high;
      item.low = json.low;
      item.close = json.close;
      item.volume = json.volume;
      stockItems.push(item);

    }

    return stockItems;
  }
}

export class StockItem {
  public open?: number;
  public close?: number;
  public high?: number;
  public low?: number;
  public volume?: number;

  public date?: Date;

}
ts

import { IgcFinancialChartModule } from 'igniteui-webcomponents-charts';
import { IgcFinancialChartComponent } from 'igniteui-webcomponents-charts';
import { TrendLineType } from 'igniteui-webcomponents-core';
import { ModuleManager } from 'igniteui-webcomponents-core';
import { StocksHistory } from './StocksHistory';

ModuleManager.register(IgcFinancialChartModule);

export class FinancialChartTrendlines {

    private chart: IgcFinancialChartComponent;
    public trendLineType: TrendLineType = TrendLineType.QuinticFit;

    constructor() {

        this.chart = document.getElementById('chart') as IgcFinancialChartComponent;
        this.chart.trendLineType = this.trendLineType;

        let trendLineSelect = document.getElementById('trendLineSelect');
        trendLineSelect!.addEventListener('change', this.onTrendlineChanged);

        StocksHistory.getMicrosoftStock().then((stocks: any[]) => {
            this.chart.dataSource = stocks;
        });
    }

    public onTrendlineChanged = (e: any) => {
        const type = e.target.value;
        switch (type) {
            case 'CubicFit':
                this.trendLineType = TrendLineType.CubicFit;
            break;
            case 'LinearFit':
                this.trendLineType = TrendLineType.LinearFit;
            break;
            case 'QuinticFit':
                this.trendLineType = TrendLineType.QuinticFit;
            break;
            case 'QuarticFit':
                this.trendLineType = TrendLineType.QuarticFit;
            break;
            case 'ExponentialFit':
                this.trendLineType = TrendLineType.ExponentialFit;
            break;
            case 'PowerLawFit':
                this.trendLineType = TrendLineType.PowerLawFit;
            break;
            case 'LogarithmicFit':
                this.trendLineType = TrendLineType.LogarithmicFit;
            break;
            case 'CumulativeAverage':
                this.trendLineType = TrendLineType.CumulativeAverage;
            break;
            case 'ExponentialAverage':
                this.trendLineType = TrendLineType.ExponentialAverage;
            break;
            case 'SimpleAverage':
                this.trendLineType = TrendLineType.SimpleAverage;
            break;
            case 'ModifiedAverage':
                this.trendLineType = TrendLineType.ModifiedAverage;
            break;
            case 'WeightedAverage':
                this.trendLineType = TrendLineType.WeightedAverage;
            break;
            case 'None':
                this.trendLineType = TrendLineType.None;
            break;
        }
        this.chart.trendLineType = this.trendLineType;
    }
}

new FinancialChartTrendlines();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>FinancialChartTrendlines</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="options horizontal">
        <label class="options-label">Trendline Type:</label>
        <select id="trendLineSelect">
            <option>QuinticFit</option>
            <option>CubicFit</option>
            <option>LinearFit</option>
            <option>QuarticFit</option>
            <option>ExponentialFit</option>
            <option>PowerLawFit</option>
            <option>LogarithmicFit</option>
            <option>CumulativeAverage</option>
            <option>ExponentialAverage</option>
            <option>SimpleAverage</option>
            <option>ModifiedAverage</option>
            <option>WeightedAverage</option>
            <option>None</option>
        </select>
    </div>

    <div class="container" style="height: calc(100% - 3rem)">
        <igc-financial-chart id="chart" width="100%" height="100%"
            chart-type="Bar"
            thickness="2"
            trend-line-thickness="2"
            trend-line-period="10"
            trend-line-brushes="rgba(0, 101, 209, 1)"
            chart-title="Microsoft Trend"
            subtitle="Between 2013 and 2017"
            zoom-slider-type="None"
            is-horizontal-zoom-enabled="false"
            is-vertical-zoom-enabled="false"
            >
        </igc-financial-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