Elemento de Gráfico

Tipos de Gráficos

La propiedad chartType determina el estilo de visualización:

• bar: Gráfico de barras vertical u horizontal
• line: Gráfico de líneas con suavizado opcional
• area: Gráfico de área con regiones rellenadas
• scatter: Diagrama de dispersión con puntos de datos
• pie: Gráfico de pastel que muestra proporciones
• doughnut: Gráfico de dona (gráfico de pastel con un agujero en el centro)
• radar: Gráfico de radar/araña

Estructura de Datos

El dataSet es un array de objetos de datos, donde cada objeto contiene:

• dataTime: El punto de tiempo relativo al ChartNode (en segundos)
• dataPoints: Un array de puntos de datos que se mostrarán en este momento

Cada punto de datos en dataPoints contiene:

• id: Identificador único para el punto de datos
• label: La etiqueta/nombre del punto de datos
• value: El valor numérico
• color (opcional): Color personalizado para este punto de datos en formato hexadecimal

Estilo de Etiquetas

El objeto labelStyle controla la apariencia de las etiquetas de los gráficos:

• Propiedades de Fuente: fill, fontSize, fontFamily, fontWeight
• Propiedades de Trazo: stroke, strokeThickness
• Propiedades de Sombra: dropShadow, dropShadowColor, dropShadowBlur, dropShadowDistance, dropShadowAngle, dropShadowAlpha

Características de Gráficos de Línea y Área

Para gráficos de línea y área, puedes configurar:

• linePointStyle: Mostrar puntos de datos como círculos rellenos o círculos huecos
• lineSmooth: Habilitar curvas suaves en lugar de líneas rectas
• lineAreaAlpha: Controlar la opacidad del área rellena (solo gráficos de área)

Características de Gráficos de Barras

Para gráficos de barras, puedes configurar:

• barOrientation: Mostrar barras vertical u horizontalmente
• barCornerRadius: Redondear las esquinas de las barras
• showBarBackground: Mostrar un fondo detrás de las barras
• barBackgroundColor/barBackgroundAlpha: Estilizar el fondo de la barra

Configuración de Leyenda

Habilitar y personalizar la leyenda del gráfico:

• showLegend: Alternar la visibilidad de la leyenda
• legendPosition: Posición de la leyenda (actualmente soporta "bottom")
• legendItemSize: Tamaño de los indicadores de color de la leyenda
• legendGap: Espaciado entre los elementos de la leyenda

{
"id": "chart-element-id",
"type": "Chart",
"start": 0,
"duration": 10,
"trackIndex": 0,
"x": 100,
"y": 100,
"chartType": "bar",
"chartWidth": 800,
"chartHeight": 600,
"bgColor": "#ffffff",
"bgAlpha": 1,
"showAxis": true,
"axisColor": "#000000",
"axisWidth": 2,
"showGrid": true,
"gridColor": "#cccccc",
"gridAlpha": 0.5,
"showLabels": true,
"labelStyle": {
  "fill": "#333333",
  "fontSize": 12,
  "fontFamily": "Arial",
  "fontWeight": "normal",
  "stroke": "#000000",
  "strokeThickness": 0,
  "dropShadow": false,
  "dropShadowColor": "#000000",
  "dropShadowBlur": 4,
  "dropShadowDistance": 3,
  "dropShadowAngle": 1.2,
  "dropShadowAlpha": 1
},
"showLegend": true,
"legendPosition": "bottom",
"legendItemSize": 14,
"legendGap": 8,
"barOrientation": "vertical",
"barCornerRadius": 4,
"showBarBackground": false,
"barBackgroundColor": "#eeeeee",
"barBackgroundAlpha": 0.4,
"dataSet": [
  {
    "dataTime": 0,
    "dataPoints": [
      { "id": "1", "label": "A", "value": 10, "color": "#ff6384" },
      { "id": "2", "label": "B", "value": 20, "color": "#36a2eb" },
      { "id": "3", "label": "C", "value": 15, "color": "#ffce56" }
    ]
  },
  {
    "dataTime": 5,
    "dataPoints": [
      { "id": "1", "label": "A", "value": 25, "color": "#ff6384" },
      { "id": "2", "label": "B", "value": 18, "color": "#36a2eb" },
      { "id": "3", "label": "C", "value": 22, "color": "#ffce56" }
    ]
  }
]
}