Descripción

El componente rg-chart es un componente Angular que utiliza la librería Kendo UI para crear gráficos interactivos y personalizables. Este componente ofrece una interfaz fácil de usar para visualizar datos en forma de gráficos, con opciones de personalización que permiten ajustar el estilo, la posición de la leyenda, y la visibilidad de las series.

Uso

Input Tipo Descripción
seriesColors string[] Array de colores para las series del gráfico.
categories string[] Categorías del eje x del gráfico.
height number Altura del gráfico.
width number Ancho del gráfico.
title string Título del gráfico.
series RgChartSeriesItem[] Array de objetos que define las series del gráfico.
legend RgChartLegend Configuración de la leyenda del gráfico.
chartTitle RgCharTitle Configuración del título del gráfico.
chartSubtitle RgChartSubtitule Configuración del subtítulo del gráfico.

HTML

<mat-card>  <mat-card-title>    <rg-sub-title [title]="title"></rg-sub-title>  </mat-card-title>  <mat-divider style="margin: 10px"></mat-divider>  <mat-card-content>    <kendo-chart      [seriesColors]="seriesColors"      [ngStyle]="getWidthAndHeightStyles(this.width, this.height)"      (legendItemClick)="onLegendItemClick($event)"    >      <!-- Configuración del gráfico -->      <kendo-chart-title        [text]="chartTitle.text"        [font]="chartTitle.font!"        [color]="chartTitle.color!"        [background]="chartTitle.background!"        [border]="chartTitle.border!"      ></kendo-chart-title>      <kendo-chart-subtitle        [text]="chartSubtitle.text"        [font]="chartSubtitle.font!"        [color]="chartSubtitle.color!"        [background]="chartSubtitle.background!"        [border]="chartSubtitle.border!"      >      </kendo-chart-subtitle>      <kendo-chart-category-axis>        <kendo-chart-category-axis-item [categories]="categories">        </kendo-chart-category-axis-item>      </kendo-chart-category-axis>      <kendo-chart-legend        *ngIf="legend.position !== 'custom'"        [title]="legend.title!"        [position]="legend.position"        [orientation]="legend.orientation"      >      </kendo-chart-legend>      <kendo-chart-series>        <kendo-chart-series-item          *ngFor="let item of series"          [type]="item.type"          [name]="item.name"          [data]="item.data"          [visible]="item.visible"          [markers]="item.markers"        >        </kendo-chart-series-item>      </kendo-chart-series>    </kendo-chart>  </mat-card-content></mat-card>

import { Component, Input } from '@angular/core';import {
  Border,  ChartOptions,  LegendItemClickEvent,  LegendTitle,  LineStyle,  MarkerType,  SeriesMarkers,  SeriesType,} from '@progress/kendo-angular-charts';// Enumeraciones y interfaces omitidas por brevedad@Component({
  selector: 'rg-chart',  templateUrl: './rg-chart.component.html',  styleUrls: ['./rg-chart.component.css'],})
export class RgChartComponent {
  // Entradas del componente  @Input() seriesColors: string[] = ['#3f51b5', '#2bf91f', '#ff0000'];  // Otras propiedades y métodos omitidos por brevedad}

#Métodos

  1. onLegendItemClick(e: LegendItemClickEvent): void Método que se llama al hacer clic en un elemento de la leyenda.
public onLegendItemClick(e: LegendItemClickEvent): void {
  /* Lógica al hacer clic en un elemento de la leyenda */}
  1. getWidthAndHeightStyles(widthParam: number, heightParam: number): any Método que devuelve estilos en píxeles para ancho y altura.
public getWidthAndHeightStyles(widthParam: number, heightParam: number): any {
  return {
    'width.px': widthParam,    'height.px': heightParam,  };}

Estos métodos proporcionan funcionalidades adicionales y opciones de personalización para el componente rg-chart. Puedes utilizar estos métodos según tus necesidades específicas.