图表元素

属性	类型	必需	示例	值范围	描述
chartType	string	true	-	-	要显示的图表类型。支持的类型：bar, line, area, scatter, pie, doughnut, radar。
chartWidth	number	true	-	200 - 800	图表画布的宽度，以像素为单位。
chartHeight	number	true	-	150 - 600	图表画布的高度，以像素为单位。
bgColor	string	false	-	-	图表的背景颜色，以十六进制格式表示。
bgAlpha	number	false	-	0 - 1	图表背景的透明度级别。1 表示完全不透明，0 表示完全透明。
showAxis	boolean	false	-	-	是否显示图表轴。
axisColor	string	false	-	-	图表轴的颜色，以十六进制格式表示。
axisWidth	number	false	-	1 - 10	图表轴的宽度，以像素为单位。
showGrid	boolean	false	-	-	是否显示图表网格。
gridColor	string	false	-	-	图表网格的颜色，以十六进制格式表示。
gridAlpha	number	false	-	0 - 1	图表网格的透明度级别。1 表示完全不透明，0 表示完全透明。
showLabels	boolean	false	-	-	是否显示图表标签。
labelStyle	object	false	-	-	图表标签的文本样式配置。
labelStyle.fill	string	false	-	-	图表标签的字体颜色，以十六进制格式表示。
labelStyle.fontSize	number	false	-	8 - 100	图表标签的字体大小，以像素为单位。
labelStyle.fontFamily	string	false	-	-	图表标签的字体系列。
labelStyle.fontWeight	string	false	-	-	图表标签的字体粗细（例如，normal, bold）。
labelStyle.stroke	string	false	-	-	图表标签的描边颜色，以十六进制格式表示。
labelStyle.strokeThickness	number	false	-	0 - 10	图表标签的描边宽度，以像素为单位。
labelStyle.dropShadow	boolean	false	-	-	是否启用图表标签的阴影效果。
labelStyle.dropShadowColor	string	false	-	-	图表标签的阴影颜色，以十六进制格式表示。
labelStyle.dropShadowBlur	number	false	-	0 - 20	标签阴影的模糊半径。
labelStyle.dropShadowDistance	number	false	-	0 - 20	标签阴影与文本之间的距离。
labelStyle.dropShadowAngle	number	false	-	0 - 6.28	标签阴影的角度，以弧度为单位。
labelStyle.dropShadowAlpha	number	false	-	0 - 1	标签阴影的不透明度。
linePointStyle	string	false	-	-	折线图/面积图中数据点的样式。选项：filled, hollow。
lineSmooth	boolean	false	-	-	是否平滑折线图/面积图中的线条。
lineAreaAlpha	number	false	-	0 - 1	面积图中填充区域的透明度级别。
showLegend	boolean	false	-	-	是否显示图表图例。
legendPosition	string	false	-	-	图例的位置。目前支持：底部。
legendItemSize	number	false	-	10 - 30	图例项的大小，以像素为单位。
legendGap	number	false	-	4 - 20	图例项之间的间距，以像素为单位。
showBarBackground	boolean	false	-	-	是否显示条形图的背景。
barBackgroundColor	string	false	-	-	条形的背景颜色，以十六进制格式表示。
barBackgroundAlpha	number	false	-	0 - 1	条形背景的透明度级别。
barOrientation	string	false	-	-	条形的方向。选项：vertical, horizontal。
barCornerRadius	number	false	-	0 - 20	条形的圆角半径，以像素为单位。
dataSet	array	false	-	-	用于渲染图表的数据集数组。每个数据集包含一个时间点（dataTime）和数据点（dataPoints）。

图表类型

chartType 属性决定了可视化风格：

bar: 垂直或水平条形图
line: 带可选平滑的折线图
area: 填充区域的面积图
scatter: 带数据点的散点图
pie: 显示比例的饼图
doughnut: 带中心孔的甜甜圈图（饼图）
radar: 雷达/蜘蛛图

数据结构

dataSet 是一个数据对象的数组，每个对象包含：

dataTime: 相对于 ChartNode 的时间点（以秒为单位）
dataPoints: 在此时显示的数据点数组

dataPoints 中的每个数据点包含：

id: 数据点的唯一标识符
label: 数据点的标签/名称
value: 数值
color (可选): 此数据点的自定义颜色（十六进制格式）

标签样式

labelStyle 对象控制图表标签的外观：

字体属性: fill, fontSize, fontFamily, fontWeight
描边属性: stroke, strokeThickness
阴影属性: dropShadow, dropShadowColor, dropShadowBlur, dropShadowDistance, dropShadowAngle, dropShadowAlpha

折线图和面积图特性

对于折线图和面积图，可以配置：

linePointStyle: 将数据点显示为填充圆或空心圆
lineSmooth: 启用平滑曲线而不是直线
lineAreaAlpha: 控制填充区域的透明度（仅适用于面积图）

条形图特性

对于条形图，可以配置：

barOrientation: 垂直或水平显示条形
barCornerRadius: 圆角条形的角
showBarBackground: 在条形后面显示背景
barBackgroundColor/barBackgroundAlpha: 样式化条形背景

图例配置

启用并自定义图表图例：

showLegend: 切换图例可见性
legendPosition: 图例的位置（当前支持“底部”）
legendItemSize: 图例颜色指示器的大小
legendGap: 图例项之间的间距

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

图表元素

图表类型

数据结构

标签样式

折线图和面积图特性

条形图特性

图例配置