Información sobre herramientas de gráficos de Angular

En los gráficos de Angular, la información sobre herramientas proporciona detalles sobre los datos enlazados y se representan en ventanas emergentes cuando el usuario final pasa el cursor sobre los puntos de datos. La información sobre herramientas es compatible con los IgxCategoryChartComponent controles , IgxFinancialChartComponent, y IgxDataChartComponent.

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

無料で試してみる

Angular Tipos de información sobre herramientas de gráficos

Angular gráfico proporciona tres tipos de información sobre herramientas que puede tener habilitada la información sobre herramientas estableciendo la toolTipType propiedad. En el ejemplo siguiente se muestra el Gráfico de columnas con un cuadro combinado que puede utilizar para cambiar el tipo de información sobre herramientas.

EXAMPLE

DATA

MODULES

TS

HTML

SCSS

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 { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";

import { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts';
import { IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts';

@NgModule({
  bootstrap: [AppComponent],
  declarations: [
    AppComponent
],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    FormsModule,
    IgxPropertyEditorPanelModule,
    IgxLegendModule,
    IgxCategoryChartModule
],
  providers: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-angular-core';
import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies';
import { IgxPropertyEditorPanelComponent, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts';
import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts';

import { defineAllComponents } from 'igniteui-webcomponents';

defineAllComponents();

@Component({
    standalone: false,
    selector: "app-root",
    styleUrls: ["./app.component.scss"],
    templateUrl: "./app.component.html",
    changeDetection: ChangeDetectionStrategy.OnPush
})

export class AppComponent implements AfterViewInit
{

    @ViewChild("propertyEditor", { static: true } )
    private propertyEditor: IgxPropertyEditorPanelComponent
    @ViewChild("toolTipTypeEditor", { static: true } )
    private toolTipTypeEditor: IgxPropertyEditorPropertyDescriptionComponent
    @ViewChild("legend", { static: true } )
    private legend: IgxLegendComponent
    @ViewChild("chart", { static: true } )
    private chart: IgxCategoryChartComponent
    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;
    }

    public constructor(private _detector: ChangeDetectorRef)
    {
    }

    public ngAfterViewInit(): void
    {
    }

}

tsコピー

<div class="container vertical sample">
  <div class="options vertical">
      <igx-property-editor-panel
      name="PropertyEditor"
      #propertyEditor
      [componentRenderer]="renderer"
      [target]="chart"
      descriptionType="CategoryChart"
      isHorizontal="true"
      isWrappingEnabled="true">
          <igx-property-editor-property-description
          propertyPath="ToolTipType"
          name="ToolTipTypeEditor"
          #toolTipTypeEditor
          label="ToolTip Type: "
          primitiveValue="Data">
          </igx-property-editor-property-description>
      </igx-property-editor-panel>
  </div>
  <div class="legend-title">
      Highest Grossing Movie Franchises
  </div>
  <div class="legend">
      <igx-legend
      name="legend"
      #legend>
      </igx-legend>
  </div>
  <div class="container fill">
      <igx-category-chart
      name="chart"
      #chart
      chartType="Column"
      [legend]="legend"
      [dataSource]="highestGrossingMovies"
      xAxisInterval="1"
      yAxisTitle="Billions of U.S. Dollars"
      yAxisTitleLeftMargin="10"
      yAxisTitleRightMargin="5"
      yAxisLabelLeftMargin="0"
      isHorizontalZoomEnabled="false"
      isVerticalZoomEnabled="false"
      crosshairsSnapToData="true">
      </igx-category-chart>
  </div>
</div>
htmlコピー

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

Edit in: Codesandbox

¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Angular completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

La propiedad toolTipType es configurable y se puede establecer en una de las siguientes opciones:

El valor de la propiedad	Descripción
DefaultInformación sobre herramientas	Muestra información sobre herramientas para un solo elemento cuando el puntero se coloca sobre él.
DataInformación sobre herramientas	Muestra información sobre herramientas de datos para todas las series del gráfico.
ItemInformación sobre herramientas	Muestre información sobre herramientas para cada elemento de datos en la categoría sobre la que se coloca el puntero.
CategoryInformación sobre herramientas	Muestra información sobre herramientas agrupada para todos los puntos de datos de la categoría sobre la que está colocado el puntero.

Angular Plantilla de información sobre herramientas de gráfico

Si ninguno de los tipos integrados de información sobre herramientas se ajusta a sus requisitos, puede crear su propia información sobre herramientas para mostrar y aplicar estilo al título de la serie, los valores de datos y los valores de los ejes. En las secciones siguientes se muestra cómo hacerlo en diferentes tipos de gráficos de Angular.

Información sobre herramientas personalizadas en Gráfico de categorías

En este ejemplo se muestra cómo crear información sobre herramientas personalizada para todas las series del control Angular IgxCategoryChartComponent. Tenga en cuenta que también puede aplicar la misma lógica a la información sobre herramientas personalizada en Angular IgxFinancialChartComponent control.

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";

import { IgxCategoryChartModule, IgxLegendModule } from "igniteui-angular-charts";


@NgModule({
  bootstrap: [AppComponent],
  declarations: [
    AppComponent,

],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    FormsModule,
    IgxCategoryChartModule,
    IgxLegendModule
],
  providers: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { ChangeDetectionStrategy, Component, ViewChild, TemplateRef } from "@angular/core";

@Component({
    standalone: false,
    changeDetection: ChangeDetectionStrategy.OnPush,
    selector: "app-root",
    styleUrls: ["./app.component.scss"],
    templateUrl: "./app.component.html"
})
export class AppComponent {

    public data = [
        { Franchise: "Marvel Universe All Films", TotalRevenue: 22.55, HighestGrossing: 2.8 },
        { Franchise: "Star Wars", TotalRevenue: 10.32, HighestGrossing: 2.07 },
        { Franchise: "Harry Potter", TotalRevenue: 9.19, HighestGrossing: 1.34 },
        { Franchise: "Avengers", TotalRevenue: 7.76, HighestGrossing: 2.8 },
        { Franchise: "Spider Man", TotalRevenue: 7.22, HighestGrossing: 1.28 },
        { Franchise: "James Bond", TotalRevenue: 7.12, HighestGrossing: 1.11 }
    ];

    @ViewChild('valueTooltip', { static: true })
    public valueTooltip: TemplateRef<object>;

    constructor() {
    }

    public onSeriesAdded(e: any) {
        if (e.args.series) {
            e.args.series.tooltipTemplate = this.valueTooltip;
        }
    }
}
tsコピー

<div class="container vertical">
    <div class="options vertical">
        <span id="legendTitle">Highest Grossing Movie Franchises</span>
        <div class="legend">
            <igx-legend #legend orientation="horizontal"></igx-legend>
        </div>
    </div>
    <div class="container">
        <igx-category-chart height="100%" width="100%"
                       [dataSource]="data"
                       isTransitionInEnabled="true"
                       xAxisInterval="1"
                       chartType="Column"
                       toolTipType="None"
                       (seriesAdded)="onSeriesAdded($event)"
                       >
        </igx-category-chart>


        <ng-template let-series="series" let-item="item" #valueTooltip>
            <div class="tooltipVertical">
                <span class="tooltipTitle">Franchise: {{item.Franchise}}<br/></span>
                <span class="tooltipLbl">Revenue of All Movies: {{item.TotalRevenue}}<br/></span>
                <span class="tooltipLbl">Highest Grossing Movie: $ {{item.HighestGrossing}}<br/></span>
            </div>
        </ng-template>
    </div>
</div>
htmlコピー

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

Edit in: Codesandbox

Información sobre herramientas personalizadas en Gráfico de datos

En este ejemplo se muestra cómo crear información sobre herramientas personalizada para cada serie Angular Gráfico de datos control.

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";

import { IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxLegendModule, IgxDataChartInteractivityModule } from "igniteui-angular-charts";


@NgModule({
  bootstrap: [AppComponent],
  declarations: [
    AppComponent,

],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    FormsModule,
    IgxDataChartCoreModule,
    IgxDataChartCategoryModule,
    IgxLegendModule,
    IgxDataChartInteractivityModule
],
  providers: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component } from "@angular/core";
import { UnknownValuePlotting } from "igniteui-angular-core";

@Component({
    standalone: false,
    selector: "app-root",
    styleUrls: ["./app.component.scss"],
    templateUrl: "./app.component.html"
})
export class AppComponent {

    public data: any;
    public unknownValuePlotting: UnknownValuePlotting = UnknownValuePlotting.DontPlot;

    constructor() {
        this.data = [
            { Country: "Canada", Coal: 400, Oil: 100, Gas: 175, Nuclear: 225, Hydro: 350 },
            { Country: "China", Coal: 925, Oil: null, Gas: null, Nuclear: 400, Hydro: 625 },
            { Country: "Russia", Coal: 550, Oil: null, Gas: null, Nuclear: 475, Hydro: 425 },
            { Country: "Australia", Coal: 450, Oil: 100, Gas: 150, Nuclear: 175, Hydro: 350 },
            { Country: "United States", Coal: 800, Oil: 250, Gas: 475, Nuclear: 575, Hydro: 750 },
            { Country: "France", Coal: 375, Oil: 150, Gas: 350, Nuclear: 275, Hydro: 325 }
        ];
    }
}
tsコピー

<div class="container vertical">
    <div class="options vertical">
        <label id="legendTitle">Energy Production by Source</label>
    </div>
    <div class="container">
        <igx-data-chart #chart height="100%" width="100%" [dataSource]="data"
        isHorizontalZoomEnabled="false" isVerticalZoomEnabled="false"
        computedPlotAreaMarginMode="Series">

            <igx-category-x-axis #xAxis name="xAxis" label="Country"></igx-category-x-axis>
            <igx-numeric-y-axis #yAxis name="yAxis" minValue=0></igx-numeric-y-axis>

            <!-- <igx-line-series name="series1" title="Coal" [xAxis]="xAxis" [yAxis]="yAxis" valueMemberPath="Coal"
              showDefaultTooltip=false [tooltipTemplate]="valueTooltip"></igx-line-series>
            <igx-line-series name="series2" title="Hydro" [xAxis]="xAxis" [yAxis]="yAxis" valueMemberPath="Hydro"
              showDefaultTooltip=false [tooltipTemplate]="valueTooltip"></igx-line-series>
            <igx-line-series name="series3" title="Nuclear" [xAxis]="xAxis" [yAxis]="yAxis" valueMemberPath="Nuclear"
              showDefaultTooltip=false [tooltipTemplate]="valueTooltip"></igx-line-series> -->
            <igx-line-series name="series4" title="Gas" [xAxis]="xAxis" [yAxis]="yAxis" valueMemberPath="Gas"
              showDefaultTooltip=false [tooltipTemplate]="valueTooltip" [unknownValuePlotting]="unknownValuePlotting"></igx-line-series>
            <igx-line-series name="series5" title="Oil" [xAxis]="xAxis" [yAxis]="yAxis" valueMemberPath="Oil"
              showDefaultTooltip=false [tooltipTemplate]="valueTooltip" unknownValuePlotting="LinearInterpolate"></igx-line-series>
          </igx-data-chart>
    </div>

    <ng-template let-series="series" let-item="item" #valueTooltip>
        <div>
            <label class=“tooltipTitle”>{{item.Country}} Production<br/></label>
            <label class=“tooltipLbl” [style.color]="series.valueMemberPath == 'Coal' ? series.actualBrush : 'black'"> Coal: {{item.Coal | number}}<br/></label>
            <label class=“tooltipLbl” [style.color]="series.valueMemberPath == 'Hydro' ? series.actualBrush : 'black'"> Hydro: {{item.Hydro | number}}<br/></label>
            <label class=“tooltipLbl” [style.color]="series.valueMemberPath == 'Oil' ? series.actualBrush : 'black'"> Oil: {{item.Oil | number}}<br/></label>
            <label class=“tooltipLbl” [style.color]="series.valueMemberPath == 'Gas' ? series.actualBrush : 'black'"> Gas: {{item.Gas | number}}<br/></label>
            <label class=“tooltipLbl” [style.color]="series.valueMemberPath == 'Nuclear' ? series.actualBrush : 'black'"> Nuclear: {{item.Nuclear | number}}<br/></label>
        </div>
    </ng-template>
</div>
htmlコピー

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

Edit in: Codesandbox

Recursos adicionales

Puede encontrar más información sobre las funciones de gráficos relacionadas en estos temas:

• Anotaciones de gráfico
• Marcadores de gráfico

Referencias de API

Los componentes IgxCategoryChartComponent e IgxFinancialChartComponent comparten las siguientes propiedades de API:

• toolTipType

En el componente IgxDataChartComponent, puede utilizar los siguientes componentes y propiedades de API:

• IgxDataToolTipLayerComponent
• IgxItemToolTipLayerComponent
• IgxCategoryToolTipLayerComponent
• ShowDefaultToolTip