Angular Marcadores de gráfico
En Ignite UI for Angular, los marcadores son elementos visuales que muestran los valores de los puntos de datos en el área de trazado del gráfico. Los marcadores ayudan a los usuarios finales a identificar inmediatamente el valor de un punto de datos, incluso si el valor se encuentra entre las líneas de cuadrícula principales o secundarias.
Angular Ejemplo de marcador de gráfico
En el siguiente ejemplo, el Gráfico de líneas compara la generación de electricidad renovable para los países Europa, China y EE. UU. durante los años 2009 a 2019 con marcadores habilitados al establecer la propiedad en Circle
valor MarkerType
de enumeración.
Los colores de los marcadores también se administran configurando las propiedades markerBrushes
y markerOutlines
en el siguiente ejemplo. Los marcadores y chartType
también se pueden configurar en este ejemplo utilizando los menús desplegables.
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));
}
}
}
tsimport { 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 { IgxCategoryChartModule, IgxDataChartInteractivityModule } from 'igniteui-angular-charts';
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxPropertyEditorPanelModule,
IgxCategoryChartModule,
IgxDataChartInteractivityModule
],
providers: [],
schemas: []
})
export class AppModule {}
tsimport { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, CategoryChartDescriptionModule, DataChartInteractivityDescriptionModule } from 'igniteui-angular-core';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { IgxPropertyEditorPropertyDescriptionChangedEventArgs, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts';
import { IgxCategoryChartComponent, MarkerType, MarkerType_$type } from 'igniteui-angular-charts';
import { EnumUtil } from 'igniteui-angular-core';
import { IgxPropertyEditorPanelComponent } from 'igniteui-angular-layouts';
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("chartTypeEditor", { static: true } )
private chartTypeEditor: IgxPropertyEditorPropertyDescriptionComponent
@ViewChild("markerTypeEditor", { static: true } )
private markerTypeEditor: IgxPropertyEditorPropertyDescriptionComponent
@ViewChild("chart", { static: true } )
private chart: IgxCategoryChartComponent
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 constructor(private _detector: ChangeDetectorRef)
{
}
public ngAfterViewInit(): void
{
}
public editorChangeUpdateMarkerType({ sender, args }: { sender: any, args: IgxPropertyEditorPropertyDescriptionChangedEventArgs }): void {
var item = sender as IgxPropertyEditorPropertyDescriptionComponent;
var chart = this.chart;
var markerVal = item.primitiveValue;
chart.markerTypes = markerVal;
}
}
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="ChartType"
name="ChartTypeEditor"
#chartTypeEditor
label="Chart Type"
primitiveValue="Line">
</igx-property-editor-property-description>
<igx-property-editor-property-description
propertyPath="MarkerTypeHandler"
name="MarkerTypeEditor"
#markerTypeEditor
label="Marker Type"
shouldOverrideDefaultEditor="true"
valueType="EnumValue"
dropDownValues="Circle, Automatic, Triangle, Pyramid, Square, Diamond, Pentagon, Hexagon, Tetragram, Pentagram, Hexagram, None"
dropDownNames="Circle, Automatic, Triangle, Pyramid, Square, Diamond, Pentagon, Hexagon, Tetragram, Pentagram, Hexagram, None"
primitiveValue="Circle"
(changed)="this.editorChangeUpdateMarkerType($event)">
</igx-property-editor-property-description>
</igx-property-editor-panel>
</div>
<div class="legend-title">
Renewable Electricity Generated
</div>
<div class="container fill">
<igx-category-chart
name="chart"
#chart
isSeriesHighlightingEnabled="true"
chartType="Line"
[dataSource]="countryRenewableElectricity"
computedPlotAreaMarginMode="Series">
</igx-category-chart>
</div>
</div>
html/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scss
¿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.
Angular Plantillas de marcadores de gráficos
Además de las propiedades del marcador, puede implementar su propio marcador configurando una función en la propiedad MarkerTemplate
de una serie representada en el control IgxCategoryChartComponent
como se demuestra en el ejemplo siguiente.
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 {}
tsimport { Component, OnInit } from "@angular/core";
import { DataTemplateMeasureInfo, DataTemplateRenderInfo } from "igniteui-angular-core";
@Component({
standalone: false,
selector: "app-root",
styleUrls: ["./app.component.scss"],
templateUrl: "./app.component.html"
})
export class AppComponent implements OnInit {
public data: any[];
constructor() { }
public onSeriesAdded(e: any) {
e.args.series.markerTemplate = this.getMarker();
}
ngOnInit(): void {
this.data = [
{ Location: "World", Solar: 23, Coal: -1, Hydropower: 1, Wind: 12, Nuclear: 3 },
{ Location: "China", Solar: 26, Coal: 2, Hydropower: 5, Wind: 10, Nuclear: 18 },
{ Location: "U.S.", Solar: 15, Coal: -15, Hydropower: -7, Wind: 10, Nuclear: 1 },
{ Location: "EU", Solar: 11, Coal: -12, Hydropower: -2, Wind: 14, Nuclear: -1 }
];
}
public getMarker(): any {
let style = { outline: "#8B5BB1", fill: "white", text: "black" };
const size = 12;
return {
measure: function (measureInfo: DataTemplateMeasureInfo) {
const context = measureInfo.context;
const height = context.measureText("M").width;
const width = context.measureText("0.00").width;
measureInfo.width = width;
measureInfo.height = height + 12;
},
render: function (renderInfo: DataTemplateRenderInfo) {
let ctx = renderInfo.context;
let x = renderInfo.xPosition;
let y = renderInfo.yPosition;
if (renderInfo.isHitTestRender) {
ctx.fillStyle = renderInfo.data.actualItemBrush.fill;
let width = renderInfo.availableWidth;
let height = renderInfo.availableHeight;
ctx.fillRect(x - (width / 2), y - (height), renderInfo.availableWidth, renderInfo.availableHeight);
return;
}
const dataItem = renderInfo.data.item;
if (dataItem === null) return;
const series = renderInfo.data.series;
const dataPath = series.valueColumn.propertyName;
let dataValue = 0;
switch (dataPath) {
case "Solar": dataValue = dataItem.Solar; break;
case "Coal": dataValue = dataItem.Coal; break;
case "Hydropower": dataValue = dataItem.Hydropower; break;
case "Wind": dataValue = dataItem.Wind; break;
case "Nuclear": dataValue = dataItem.Nuclear; break;
}
ctx.font = '8pt Verdana';
ctx.textBaseline = 'top';
ctx.fillStyle = "black";
let xOffset = 20;
let yOffset = 10;
if (dataValue < 0) {
ctx.fillText(dataValue + "%", x - (xOffset / 2), y + (yOffset));
}
else {
ctx.fillText(dataValue + "%", x - (xOffset / 2), y - (yOffset * 2));
}
ctx.strokeStyle = "black";
ctx.fillStyle = "white";
ctx.beginPath();
ctx.arc(x, y, 6, 0, 2 * Math.PI);
ctx.stroke();
ctx.fill();
}
}
}
}
ts<div class="container vertical">
<div class="options vertical">
<span id="legendTitle">Percentage Change in Energy Generation in 2019</span>
<div class="legend">
<igx-legend #legend orientation="horizontal"></igx-legend>
</div>
</div>
<div class="container">
<igx-category-chart height="100%" width="100%"
[legend]="legend"
[dataSource]="data"
chartType="Column"
thickness="2"
isHorizontalZoomEnabled="false"
isVerticalZoomEnabled="false"
isSeriesHighlightingEnabled="true"
(seriesAdded)="onSeriesAdded($event)"
xAxisMajorStroke="LightGray"
xAxisMajorStrokeThickness="1"
yAxisInterval="10"
yAxisMinimumValue="-20"
yAxisMaximumValue="30">
</igx-category-chart>
</div>
</div>
html/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scss
Recursos adicionales
Puede encontrar más información sobre las funciones de gráficos relacionadas en estos temas:
Referencias de API
La siguiente es una lista de miembros de API mencionados en las secciones anteriores: