Web Components チャートのハイライト表示の例

以下の例は、Web Components チャートで使用できるさまざまなハイライト表示オプションを示しています。

EXAMPLE

DATA

TS

HTML

CSS

export class TemperatureAnnotatedDataItem {
    public constructor(init: Partial<TemperatureAnnotatedDataItem>) {
        Object.assign(this, init);
    }

    public index: number;
    public tempInfo: string;
    public temperature: number;
    public month: string;

}
export class TemperatureAnnotatedData extends Array<TemperatureAnnotatedDataItem> {
    public constructor(items: Array<TemperatureAnnotatedDataItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new TemperatureAnnotatedDataItem(
                {
                    index: 0,
                    tempInfo: `27°C`,
                    temperature: 27,
                    month: `Jan`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 1,
                    tempInfo: `25°C`,
                    temperature: 25,
                    month: `Feb`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 2,
                    tempInfo: `21°C`,
                    temperature: 21,
                    month: `Mar`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 3,
                    tempInfo: `19°C`,
                    temperature: 19,
                    month: `Apr`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 4,
                    tempInfo: `16°C`,
                    temperature: 16,
                    month: `May`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 5,
                    tempInfo: `13°C`,
                    temperature: 13,
                    month: `Jun`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 6,
                    tempInfo: `14°C`,
                    temperature: 14,
                    month: `Jul`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 7,
                    tempInfo: `15°C`,
                    temperature: 15,
                    month: `Aug`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 8,
                    tempInfo: `19°C`,
                    temperature: 19,
                    month: `Sep`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 9,
                    tempInfo: `22°C`,
                    temperature: 22,
                    month: `Oct`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 10,
                    tempInfo: `26°C`,
                    temperature: 26,
                    month: `Nov`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 11,
                    tempInfo: `30°C`,
                    temperature: 30,
                    month: `Dec`
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsコピー

import { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import { IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { TemperatureAnnotatedDataItem, TemperatureAnnotatedData } from './TemperatureAnnotatedData';
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
);

export class Sample {

    private propertyEditor: IgcPropertyEditorPanelComponent
    private highlightingModeEditor: IgcPropertyEditorPropertyDescriptionComponent
    private highlightingBehaviorEditor: IgcPropertyEditorPropertyDescriptionComponent
    private chart: IgcCategoryChartComponent
    private _bind: () => void;

    constructor() {
        var propertyEditor = this.propertyEditor = document.getElementById('PropertyEditor') as IgcPropertyEditorPanelComponent;
        var highlightingModeEditor = this.highlightingModeEditor = document.getElementById('HighlightingModeEditor') as IgcPropertyEditorPropertyDescriptionComponent;
        var highlightingBehaviorEditor = this.highlightingBehaviorEditor = document.getElementById('HighlightingBehaviorEditor') as IgcPropertyEditorPropertyDescriptionComponent;
        var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;

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

    private _temperatureAnnotatedData: TemperatureAnnotatedData = null;
    public get temperatureAnnotatedData(): TemperatureAnnotatedData {
        if (this._temperatureAnnotatedData == null)
        {
            this._temperatureAnnotatedData = new TemperatureAnnotatedData();
        }
        return this._temperatureAnnotatedData;
    }

    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);
        }
        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="HighlightingMode"
            name="HighlightingModeEditor"
            id="HighlightingModeEditor"
            label="Highlighting Mode: "
            primitive-value="FadeOthersSpecific">
            </igc-property-editor-property-description>
            <igc-property-editor-property-description
            property-path="HighlightingBehavior"
            name="HighlightingBehaviorEditor"
            id="HighlightingBehaviorEditor"
            label="Highlighting Behavior: "
            primitive-value="NearestItemsAndSeries">
            </igc-property-editor-property-description>
        </igc-property-editor-panel>
    </div>

    <div class="legend-title">
        Average Temperature in Sydney
    </div>

    <div class="container fill">
        <igc-category-chart
        name="chart"
        id="chart"
        chart-type="Column"
        computed-plot-area-margin-mode="Series"
        is-horizontal-zoom-enabled="false"
        is-vertical-zoom-enabled="false"
        highlighting-mode="FadeOthersSpecific"
        highlighting-behavior="NearestItemsAndSeries"
        y-axis-maximum-value="35"
        y-axis-label-location="OutsideRight"
        tool-tip-type="None"
        is-transition-in-enabled="false">
        </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コピー

Edit in: Codesandbox

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

Web Components チャートのハイライト表示モードと動作

すべての Web Components チャートは、さまざまなハイライト表示オプションをサポートしています。highlightingMode は、プロット領域に描画されたシリーズ/データ項目にマウスを合わせたときに明るくまたはフェードするように設定できます。highlightingBehavior は、ハイライト表示の効果をトリガーするために、直接または最も近いデータ項目に設定できます。ハイライト表示のモードと動作は、IgcCategoryChartComponent、IgcFinancialChartComponent、および IgcDataChartComponent コントロールでサポートされており、ハイライト表示機能を使用するための同じ API を備えています。

以下の例は、highlightingMode Web Components チャートを示しています。

EXAMPLE

DATA

TS

HTML

CSS

export class TemperatureAnnotatedDataItem {
    public constructor(init: Partial<TemperatureAnnotatedDataItem>) {
        Object.assign(this, init);
    }

    public index: number;
    public tempInfo: string;
    public temperature: number;
    public month: string;

}
export class TemperatureAnnotatedData extends Array<TemperatureAnnotatedDataItem> {
    public constructor(items: Array<TemperatureAnnotatedDataItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new TemperatureAnnotatedDataItem(
                {
                    index: 0,
                    tempInfo: `27°C`,
                    temperature: 27,
                    month: `Jan`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 1,
                    tempInfo: `25°C`,
                    temperature: 25,
                    month: `Feb`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 2,
                    tempInfo: `21°C`,
                    temperature: 21,
                    month: `Mar`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 3,
                    tempInfo: `19°C`,
                    temperature: 19,
                    month: `Apr`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 4,
                    tempInfo: `16°C`,
                    temperature: 16,
                    month: `May`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 5,
                    tempInfo: `13°C`,
                    temperature: 13,
                    month: `Jun`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 6,
                    tempInfo: `14°C`,
                    temperature: 14,
                    month: `Jul`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 7,
                    tempInfo: `15°C`,
                    temperature: 15,
                    month: `Aug`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 8,
                    tempInfo: `19°C`,
                    temperature: 19,
                    month: `Sep`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 9,
                    tempInfo: `22°C`,
                    temperature: 22,
                    month: `Oct`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 10,
                    tempInfo: `26°C`,
                    temperature: 26,
                    month: `Nov`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 11,
                    tempInfo: `30°C`,
                    temperature: 30,
                    month: `Dec`
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsコピー

import { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import { IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { TemperatureAnnotatedDataItem, TemperatureAnnotatedData } from './TemperatureAnnotatedData';
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
);

export class Sample {

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

    constructor() {
        var propertyEditor = this.propertyEditor = document.getElementById('PropertyEditor') as IgcPropertyEditorPanelComponent;
        var highlightingModeEditor = this.highlightingModeEditor = document.getElementById('HighlightingModeEditor') as IgcPropertyEditorPropertyDescriptionComponent;
        var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;

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

    private _temperatureAnnotatedData: TemperatureAnnotatedData = null;
    public get temperatureAnnotatedData(): TemperatureAnnotatedData {
        if (this._temperatureAnnotatedData == null)
        {
            this._temperatureAnnotatedData = new TemperatureAnnotatedData();
        }
        return this._temperatureAnnotatedData;
    }

    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);
        }
        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="HighlightingMode"
            name="HighlightingModeEditor"
            id="HighlightingModeEditor"
            label="Highlighting Mode: "
            primitive-value="BrightenSpecific">
            </igc-property-editor-property-description>
        </igc-property-editor-panel>
    </div>

    <div class="container fill">
        <igc-category-chart
        name="chart"
        id="chart"
        chart-type="Column"
        computed-plot-area-margin-mode="Series"
        is-horizontal-zoom-enabled="false"
        is-vertical-zoom-enabled="false"
        highlighting-mode="BrightenSpecific"
        tool-tip-type="None"
        crosshairs-display-mode="None"
        is-transition-in-enabled="false">
        </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コピー

Edit in: Codesandbox

以下の例は、highlightingBehavior Web Components チャートを示しています。

EXAMPLE

DATA

TS

HTML

CSS

export class TemperatureAnnotatedDataItem {
    public constructor(init: Partial<TemperatureAnnotatedDataItem>) {
        Object.assign(this, init);
    }

    public index: number;
    public tempInfo: string;
    public temperature: number;
    public month: string;

}
export class TemperatureAnnotatedData extends Array<TemperatureAnnotatedDataItem> {
    public constructor(items: Array<TemperatureAnnotatedDataItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new TemperatureAnnotatedDataItem(
                {
                    index: 0,
                    tempInfo: `27°C`,
                    temperature: 27,
                    month: `Jan`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 1,
                    tempInfo: `25°C`,
                    temperature: 25,
                    month: `Feb`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 2,
                    tempInfo: `21°C`,
                    temperature: 21,
                    month: `Mar`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 3,
                    tempInfo: `19°C`,
                    temperature: 19,
                    month: `Apr`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 4,
                    tempInfo: `16°C`,
                    temperature: 16,
                    month: `May`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 5,
                    tempInfo: `13°C`,
                    temperature: 13,
                    month: `Jun`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 6,
                    tempInfo: `14°C`,
                    temperature: 14,
                    month: `Jul`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 7,
                    tempInfo: `15°C`,
                    temperature: 15,
                    month: `Aug`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 8,
                    tempInfo: `19°C`,
                    temperature: 19,
                    month: `Sep`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 9,
                    tempInfo: `22°C`,
                    temperature: 22,
                    month: `Oct`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 10,
                    tempInfo: `26°C`,
                    temperature: 26,
                    month: `Nov`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 11,
                    tempInfo: `30°C`,
                    temperature: 30,
                    month: `Dec`
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsコピー

import { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import { IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { TemperatureAnnotatedDataItem, TemperatureAnnotatedData } from './TemperatureAnnotatedData';
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
);

export class Sample {

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

    constructor() {
        var propertyEditor = this.propertyEditor = document.getElementById('PropertyEditor') as IgcPropertyEditorPanelComponent;
        var highlightingBehaviorEditor = this.highlightingBehaviorEditor = document.getElementById('HighlightingBehaviorEditor') as IgcPropertyEditorPropertyDescriptionComponent;
        var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;

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

    private _temperatureAnnotatedData: TemperatureAnnotatedData = null;
    public get temperatureAnnotatedData(): TemperatureAnnotatedData {
        if (this._temperatureAnnotatedData == null)
        {
            this._temperatureAnnotatedData = new TemperatureAnnotatedData();
        }
        return this._temperatureAnnotatedData;
    }

    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);
        }
        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="HighlightingBehavior"
            name="HighlightingBehaviorEditor"
            id="HighlightingBehaviorEditor"
            label="Highlighting Behavior: "
            primitive-value="DirectlyOver">
            </igc-property-editor-property-description>
        </igc-property-editor-panel>
    </div>

    <div class="container fill">
        <igc-category-chart
        name="chart"
        id="chart"
        chart-type="Column"
        computed-plot-area-margin-mode="Series"
        is-horizontal-zoom-enabled="false"
        is-vertical-zoom-enabled="false"
        highlighting-mode="Brighten"
        highlighting-behavior="DirectlyOver"
        tool-tip-type="None"
        crosshairs-display-mode="None"
        is-transition-in-enabled="false">
        </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コピー

Edit in: Codesandbox

Web Components チャート凡例のハイライト表示

すべての Web Components チャートは、凡例のハイライト表示をサポートしています。legendHighlightingMode を有効にすると、マウスが凡例マーカー項目にカーソルを合わせると、描画されたシリーズがプロット領域でハイライト表示されます。凡例のハイライト表示は、IgcCategoryChartComponent、IgcFinancialChartComponent、および IgcDataChartComponent コントロールでサポートされており、ハイライト表示機能を使用するための同じ API を備えています。

以下の例は、凡例シリーズハイライト表示の Web Components チャートを示しています。

EXAMPLE

DATA

TS

HTML

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 { IgcLegendModule, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";


ModuleManager.register(
    IgcLegendModule,
    IgcCategoryChartModule
);

export class Sample {

    private legend: IgcLegendComponent
    private chart: IgcCategoryChartComponent
    private _bind: () => void;

    constructor() {
        var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
        var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;

        this._bind = () => {
            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;
    }

}

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="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"
        highlighting-mode="Brighten"
        legend-highlighting-mode="MatchSeries"
        is-transition-in-enabled="false">
        </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コピー

Edit in: Codesandbox

ハイライト表示レイヤー

Ignite UI for Web Components IgcCategoryChartComponent は、データ項目にカーソルを合わせると 3 種類のハイライト表示を有効にできます。

1. シリーズ ハイライトは、ポインターがデータ ポイント上ある場合に、マーカーまたは列で表される単一のデータ ポイントをハイライトします。これは、isSeriesHighlightingEnabled プロパティを true に設定することで有効になります。

2. 項目ハイライトは、その位置に縞模様の図形を描画したりマーカーを描画したりすることでシリーズの項目をハイライト表示します。これは、isItemHighlightingEnabled プロパティを true に設定することで有効になります。

3. カテゴリ ハイライトはすべてのカテゴリ軸を対象にします。カーソル位置に最も近い軸領域を照らす図形を描画します。これは、isCategoryHighlightingEnabled プロパティを true に設定することで有効になります。

以下の例は、Web Components チャートで使用できるさまざまなハイライト表示レイヤーを示しています。

EXAMPLE

TS

HTML

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コピー

Edit in: Codesandbox

その他のリソース

関連するチャートタイプの詳細については、以下のトピックを参照してください。

• チャート アニメーション
• チャート注釈
• チャート ツールチップ

API リファレンス

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

• highlightingMode
• highlightingBehavior
• LegendHighlightingBehavior
• isCategoryHighlightingEnabled
• isItemHighlightingEnabled
• isSeriesHighlightingEnabled
• IgcCategoryChartComponent
• IgcDataChartComponent
• IgcFinancialChartComponent