Elemento de Gráfico

Propriedade	Tipo	Necessário	Exemplo	Faixa de Valores	Descrição
chartType	string	true	-	-	O tipo de gráfico a ser exibido. Tipos suportados: bar, line, area, scatter, pie, doughnut, radar.
chartWidth	number	true	-	200 - 800	A largura da área do gráfico, em pixels.
chartHeight	number	true	-	150 - 600	A altura da área do gráfico, em pixels.
bgColor	string	false	-	-	A cor de fundo do gráfico, em formato hexadecimal.
bgAlpha	number	false	-	0 - 1	O nível de transparência do fundo do gráfico. 1 representa opacidade total, e 0 representa transparência total.
showAxis	boolean	false	-	-	Se deve exibir os eixos do gráfico.
axisColor	string	false	-	-	A cor dos eixos do gráfico, em formato hexadecimal.
axisWidth	number	false	-	1 - 10	A largura dos eixos do gráfico, em pixels.
showGrid	boolean	false	-	-	Se deve exibir a grade do gráfico.
gridColor	string	false	-	-	A cor da grade do gráfico, em formato hexadecimal.
gridAlpha	number	false	-	0 - 1	O nível de transparência da grade do gráfico. 1 representa opacidade total, e 0 representa transparência total.
showLabels	boolean	false	-	-	Se deve exibir rótulos do gráfico.
labelStyle	object	false	-	-	Configuração do estilo de texto para os rótulos do gráfico.
labelStyle.fill	string	false	-	-	A cor da fonte dos rótulos do gráfico, em formato hexadecimal.
labelStyle.fontSize	number	false	-	8 - 100	O tamanho da fonte dos rótulos do gráfico, em pixels.
labelStyle.fontFamily	string	false	-	-	A família da fonte dos rótulos do gráfico.
labelStyle.fontWeight	string	false	-	-	O peso da fonte dos rótulos do gráfico (por exemplo, normal, bold).
labelStyle.stroke	string	false	-	-	A cor do traço dos rótulos do gráfico, em formato hexadecimal.
labelStyle.strokeThickness	number	false	-	0 - 10	A largura do traço dos rótulos do gráfico, em pixels.
labelStyle.dropShadow	boolean	false	-	-	Se deve ativar o efeito de sombra para os rótulos do gráfico.
labelStyle.dropShadowColor	string	false	-	-	A cor da sombra dos rótulos do gráfico, em formato hexadecimal.
labelStyle.dropShadowBlur	number	false	-	0 - 20	O raio de desfoque da sombra do rótulo.
labelStyle.dropShadowDistance	number	false	-	0 - 20	A distância da sombra do rótulo em relação ao texto.
labelStyle.dropShadowAngle	number	false	-	0 - 6.28	O ângulo da sombra do rótulo, em radianos.
labelStyle.dropShadowAlpha	number	false	-	0 - 1	A opacidade da sombra do rótulo.
linePointStyle	string	false	-	-	O estilo dos pontos de dados em gráficos de linha/área. Opções: filled, hollow.
lineSmooth	boolean	false	-	-	Se deve suavizar as linhas em gráficos de linha/área.
lineAreaAlpha	number	false	-	0 - 1	O nível de transparência da área preenchida em gráficos de área.
showLegend	boolean	false	-	-	Se deve exibir a legenda do gráfico.
legendPosition	string	false	-	-	A posição da legenda. Atualmente suporta: bottom.
legendItemSize	number	false	-	10 - 30	O tamanho dos itens da legenda, em pixels.
legendGap	number	false	-	4 - 20	O espaço entre os itens da legenda, em pixels.
showBarBackground	boolean	false	-	-	Se deve exibir o fundo dos gráficos de barras.
barBackgroundColor	string	false	-	-	A cor de fundo das barras, em formato hexadecimal.
barBackgroundAlpha	number	false	-	0 - 1	O nível de transparência do fundo das barras.
barOrientation	string	false	-	-	A orientação das barras. Opções: vertical, horizontal.
barCornerRadius	number	false	-	0 - 20	O raio dos cantos das barras, em pixels.
dataSet	array	false	-	-	Um array de conjuntos de dados usados para renderizar o gráfico. Cada conjunto de dados contém um ponto no tempo (dataTime) e pontos de dados (dataPoints).

Tipos de Gráfico

A propriedade chartType determina o estilo de visualização:

bar: Gráfico de barras verticais ou horizontais
line: Gráfico de linha com suavização opcional
area: Gráfico de área com regiões preenchidas
scatter: Gráfico de dispersão com pontos de dados
pie: Gráfico de pizza mostrando proporções
doughnut: Gráfico de rosquinha (gráfico de pizza com buraco no centro)
radar: Gráfico de radar/aranha

Estrutura de Dados

O dataSet é um array de objetos de dados, onde cada objeto contém:

dataTime: O ponto no tempo relativo ao ChartNode (em segundos)
dataPoints: Um array de pontos de dados a serem exibidos neste momento

Cada ponto de dado em dataPoints contém:

id: Identificador único para o ponto de dado
label: O rótulo/nome do ponto de dado
value: O valor numérico
color (opcional): Cor personalizada para este ponto de dado em formato hexadecimal

Estilização de Rótulos

O objeto labelStyle controla a aparência dos rótulos do gráfico:

Propriedades de Fonte: fill, fontSize, fontFamily, fontWeight
Propriedades de Traço: stroke, strokeThickness
Propriedades de Sombra: dropShadow, dropShadowColor, dropShadowBlur, dropShadowDistance, dropShadowAngle, dropShadowAlpha

Recursos de Gráficos de Linha e Área

Para gráficos de linha e área, você pode configurar:

linePointStyle: Exibir pontos de dados como círculos preenchidos ou círculos ocos
lineSmooth: Ativar curvas suaves em vez de linhas retas
lineAreaAlpha: Controlar a opacidade da área preenchida (apenas gráficos de área)

Recursos de Gráficos de Barras

Para gráficos de barras, você pode configurar:

barOrientation: Exibir barras verticalmente ou horizontalmente
barCornerRadius: Arredondar os cantos das barras
showBarBackground: Exibir um fundo atrás das barras
barBackgroundColor/barBackgroundAlpha: Estilizar o fundo da barra

Configuração da Legenda

Ative e personalize a legenda do gráfico:

showLegend: Alternar a visibilidade da legenda
legendPosition: Posição da legenda (atualmente suporta "bottom")
legendItemSize: Tamanho dos indicadores de cor da legenda
legendGap: Espaçamento entre os itens da legenda

chartElement.json

{
"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" }
    ]
  }
]
}

Overview

Element

Effect