圖表元素

屬性	類型	必要	範例	值範圍	描述
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	-	-	圖例的位置。目前支持：bottom。
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: 圖例位置（目前支持 "bottom"）
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

圖表元素

圖表類型

數據結構

標籤樣式

折線圖和面積圖特徵

條形圖特徵

圖例配置