Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

204
Vistas
Múltiples etiquetas por elemento en el gráfico de Kendo

Estoy tratando de obtener varias etiquetas por elemento en el gráfico de columnas de Kendo. El diseño deseado se ve así gráfico deseado

Solo pude obtener este diseño

 import { Component } from '@angular/core'; import { groupBy, GroupResult } from '@progress/kendo-data-query'; import { ValueAxisLabels } from '@progress/kendo-angular-charts'; export type TrendItem = { clientName: string; periodName: string; income: number; }; @Component({ selector: 'my-app', template: ` <kendo-chart> <kendo-chart-category-axis> <kendo-chart-category-axis-item [categories]="categories"> </kendo-chart-category-axis-item> </kendo-chart-category-axis> <kendo-chart-value-axis> <kendo-chart-value-axis-item [labels]="valueAxisLabels"> </kendo-chart-value-axis-item> </kendo-chart-value-axis> <kendo-chart-series> <kendo-chart-series-item *ngFor="let groupedResult of groupedTrendsByPeriod" [data]="groupedResult.items" field="income" type="column"> <kendo-chart-series-item-labels [content]="labelVisual"> </kendo-chart-series-item-labels> </kendo-chart-series-item> </kendo-chart-series> </kendo-chart> `, }) export class AppComponent { public valueAxisLabels: ValueAxisLabels = { font: 'bold 16px Arial, sans-serif', }; public trendItems: TrendItem[] = [ { clientName: 'Client1', periodName: 'Q1 2020', income: 20, }, { clientName: 'Client1', periodName: 'Q2 2020', income: 15, }, { clientName: 'Client1', periodName: 'Q3 2020', income: 35, }, { clientName: 'Client1', periodName: 'Q4 2020', income: 40, }, { clientName: 'Client2', periodName: 'Q1 2020', income: 15, }, { clientName: 'Client2', periodName: 'Q2 2020', income: 20, }, { clientName: 'Client2', periodName: 'Q3 2020', income: 15, }, { clientName: 'Client2', periodName: 'Q4 2020', income: 30, } ]; public categories = (groupBy(this.trendItems, [{ field: 'clientName' }]) as GroupResult[]) .map((e) => e.value); public groupedTrendsByPeriod = groupBy(this.trendItems, [{ field: 'periodName' }]) as GroupResult[]; public labelVisual(e: { dataItem: TrendItem }) { return `$${e.dataItem.income}\r\n${e.dataItem.periodName}`; } }

Puedes probar este código aquí .

Mi resultado actual se ve así progreso actual


Entonces, mi pregunta es cómo mostrar varias etiquetas por elemento como en la primera imagen.


Mis obstáculos actuales.

  • No encontré una manera de agregar múltiples <kendo-chart-series-item-labels> . Solo se renderizará uno, el resto se ignorará.
  • No encontré una manera de colocar las etiquetas debajo del gráfico de columnas. Para el gráfico de columnas, solo es posible usar las opciones "center", "insideBase", "insideEnd", "outsideEnd" (según la referencia de la API ), pero ninguna de ellas me da la posición deseada.
over 4 years ago · Santiago Trujillo
2 Respuestas
Responde la pregunta

0

No creo que kendo proporcione una solución nativa para eso, pero lo que puedo sugerir es:

  1. Use leyendas para mostrar el significado de cada barra. como el ejemplo aquí .

  2. Use algunas etiquetas autogeneradas y colóquelas debajo de la mesa, lo que es riesgoso para la interfaz de usuario. Proporcioné un ejemplo aquí .

over 4 years ago · Santiago Trujillo Denunciar

0

Puede utilizar la función de notas de KendoChartComponent.

Puedes ver la implementación aquí .

  1. Agrega noteTextField="periodName" [notes]="notesOptions" a su elemento kendo-chart-series-item .

  2. Agrega [labels]="labelOptions" a su elemento kendo-chart-category-axis-item .

  3. Agrega lo siguiente a su componente:

     public notesOptions = { position: 'bottom', icon: { visible: false, }, label: { color: 'black', content: (e) => e.dataItem.periodName, font: "12px Arial", margin: -30, }, line: { width: 0, }, }; public labelOptions = { margin: { top: 10, }, };
  4. Cambie el valor de retorno de la función labelVisual a `$${e.dataItem.income}\` .

Nota: se pueden realizar algunos cambios y aún dar el diseño deseado, por lo que si algo no está exactamente bien, probablemente se pueda reparar.

Aquí hay una imagen del gráfico resultante: ingrese la descripción de la imagen aquí

over 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda