Overview

ทรัพย์สิน	ประเภท	จำเป็น	ตัวอย่าง	ช่วงค่า	คำอธิบาย
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	-	-	น้ำหนักฟอนต์ของป้ายชื่อกราฟ (เช่น ปกติ, ตัวหนา).
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	-	-	รูปแบบของจุดข้อมูลในกราฟเส้น/พื้นที่ ตัวเลือก: เติม, เว้า.
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	-	-	การจัดแนวของแท่ง ตัวเลือก: แนวตั้ง, แนวนอน.
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" }
    ]
  }
]
}