Docs

API 參考

Chart

以提供的數值呈現精確比較或趨勢。

presentation.tsx

<Chart id="trend" x={9} y={26} w={82} h={54} type="line" data='[{"label":"Q1","value":42},{"label":"Q2","value":58}]' showAxes="true" showLabels="true" ariaLabel="季度採用率" />

屬性參考

屬性值應保持字面且可序列化，才能由 Canvas、Inspector、驗證與匯出流程可靠處理。

API屬性型別／值必要說明
所有原生圖層共用 propsidstring是穩定且唯一的圖層識別字。每個可見的原生圖層都必須提供。
xnumber是相對於投影片畫布左側的位置百分比。
ynumber是相對於投影片畫布頂端的位置百分比。
wnumber是圖層寬度，單位為畫布百分比。
hnumber是圖層高度，單位為畫布百分比。
groupIdstring—在不加入 wrapper 元素的情況下，將原生子圖層編組。
groupNamestring—在 Workbench 顯示的群組名稱。
sharedIdstring—連接相鄰 Morph 投影片中的同型圖層；在同一張投影片內必須唯一。
rotationnumber—順時針旋轉角度。
opacitynumber—圖層不透明度，範圍為 0 到 1。
motionJSON string—版本化的宣告式動作序列 JSON 字串；仍須保留完整的靜態最終畫面。
interactionJSON string—版本化的點擊互動 JSON 字串，可用於投影片導覽或連結。
Charttypebar | line | area | pie | donut | scatter是圖表呈現類型。
dataJSON string是1 到 24 筆資料；每筆都要有有限數值 value，亦可包含 label、x、size、color。
chartDataByTypeJSON string—選用；以圖表類型為 key 的資料集。
chartPresetexecutive | minimal | vivid—視覺 preset。
chartThemelight | dark-gold—圖表專用主題。
paletteaurora | editorial | gilded | ocean | sunset—命名色盤。
colorModepalette | single | emphasis | gradient—顏色分配策略。
emphasisIndexnumber—由 color mode 強調的資料索引。
annotationIndex / annotationText / annotationColornumber | string—選用的註解目標、文字與顏色。
barGapcompact | balanced | airy—長條圖的間距。
barRadius / areaOpacity / donutHolenumber—長條圓角、面積圖填色不透明度或甜甜圈孔徑。
lineSmoothboolean—平滑折線或面積圖路徑。
showAxes / showGrid / showLabelsboolean—顯示座標軸、格線或標籤。
labelMode / labelColorall | value | category | none | color—標籤顯示模式與顏色。
numberFormatauto | integer | decimal | percent | currency | compact—數值格式。
decimals / currencynumber | string—小數位數與幣別代碼或符號。
sortinput | ascending | descending—資料排序方式。
referenceValue / referenceLabel / referenceColornumber | string—選用的參考線數值、標籤與顏色。
chartMotionauto | grow | draw | sweep | pop | none—圖表進場動態。

必要語法

使用 id、x、y、w、h、type 與 data；data 是包含 label 與 value 的 JSON 字串，提供的數值會被完整保留。

讓資料可理解

使用附近的 Text 說明單位、期間與來源；showAxes、showLabels、palette 與 chartMotion 都是可在需要時加入的簡報 props。