Web Components Marcadores de gráfico
En Ignite UI for Web Components, 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.
Web Components 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 { 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
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Web Components Plantillas de marcadores de gráficos
Además de las propiedades del marcador, puede implementar su propio marcador estableciendo una función en la propiedad MarkerTemplate de una serie representada en el control IgcCategoryChartComponent como se demuestra en el ejemplo siguiente.
import { IgcCategoryChartModule, IgcChartSeriesEventArgs, IgcCategoryChartComponent, IgcDomainChartComponent,
IgcColumnSeriesComponent, IgcLegendModule, IgcLegendComponent } from 'igniteui-webcomponents-charts';
import { ModuleManager, DataTemplateMeasureInfo, DataTemplateRenderInfo } from 'igniteui-webcomponents-core';
ModuleManager.register(
IgcCategoryChartModule,
IgcLegendModule
);
export class CategoryChartMarkerTemplates {
private chart: IgcCategoryChartComponent;
public data: any[] = [];
constructor() {
this.onSeriesAdded = this.onSeriesAdded.bind(this);
this.initData();
this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
this.chart.seriesAdded = this.onSeriesAdded;
this.chart.dataSource = this.data;
this.chart.legend = document.getElementById("legend") as IgcLegendComponent;
}
public initData() {
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 onSeriesAdded(s: IgcDomainChartComponent, e: IgcChartSeriesEventArgs){
let series : IgcColumnSeriesComponent = e.series as IgcColumnSeriesComponent;
series.markerTemplate = this.getMarker();
}
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();
}
}
}
}
new CategoryChartMarkerTemplates();
ts<!DOCTYPE html>
<html>
<head>
<title>CategoryChartMarkers</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 vertical">
<span class="legend-title">Percentage Change in Energy Generation in 2019</span>
<div class="legend">
<igc-legend id="legend" orientation="horizontal"></igc-legend>
</div>
</div>
<igc-category-chart id="chart"
width="100%"
height="calc(100% - 3rem)"
chart-type="Column"
thickness="2"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false"
is-series-highlighting-enabled="true";
x-axis-major-stroke-thickness="1"
x-axis-major-stroke="LightGray"
y-axis-minimum-value="-20"
y-axis-maximum-value="30"
y-axis-interval="10">
</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
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: