チャート要素

プロパティ	タイプ	必須	例	値の範囲	説明
chartType	string	true	-	-	表示するチャートの種類。サポートされているタイプ：bar, line, area, scatter, pie, doughnut, radar。
chartWidth	number	true	-	200 - 800	チャートキャンバスの幅（ピクセル単位）。
chartHeight	number	true	-	150 - 600	チャートキャンバスの高さ（ピクセル単位）。
bgColor	string	false	-	-	チャートの背景色（16進数形式）。
bgAlpha	number	false	-	0 - 1	チャート背景の透明度。1は完全不透明、0は完全透明を表します。
showAxis	boolean	false	-	-	チャート軸を表示するかどうか。
axisColor	string	false	-	-	チャート軸の色（16進数形式）。
axisWidth	number	false	-	1 - 10	チャート軸の幅（ピクセル単位）。
showGrid	boolean	false	-	-	チャートグリッドを表示するかどうか。
gridColor	string	false	-	-	チャートグリッドの色（16進数形式）。
gridAlpha	number	false	-	0 - 1	チャートグリッドの透明度。1は完全不透明、0は完全透明を表します。
showLabels	boolean	false	-	-	チャートラベルを表示するかどうか。
labelStyle	object	false	-	-	チャートラベルのテキストスタイル設定。
labelStyle.fill	string	false	-	-	チャートラベルのフォントカラー（16進数形式）。
labelStyle.fontSize	number	false	-	8 - 100	チャートラベルのフォントサイズ（ピクセル単位）。
labelStyle.fontFamily	string	false	-	-	チャートラベルのフォントファミリー。
labelStyle.fontWeight	string	false	-	-	チャートラベルのフォントウェイト（例：normal, bold）。
labelStyle.stroke	string	false	-	-	チャートラベルのストロークカラー（16進数形式）。
labelStyle.strokeThickness	number	false	-	0 - 10	チャートラベルのストローク幅（ピクセル単位）。
labelStyle.dropShadow	boolean	false	-	-	チャートラベルのシャドウ効果を有効にするかどうか。
labelStyle.dropShadowColor	string	false	-	-	チャートラベルのシャドウカラー（16進数形式）。
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	-	-	棒の背景色（16進数形式）。
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 (オプション): このデータポイントのカスタムカラー（16進数形式）

ラベルスタイリング

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