บริการสร้าง Chart คุณภาพสำหรับการ embed และ export รูปภาพ
Version: 1.0.0 | WE Tech Consulting Co.,Ltd
WTC Chart Generator รองรับการสร้าง Chart ผ่าน URL หรือ POST API สำหรับการใช้งานกับ GlideApps, Web Embed, หรือการ export รูปภาพ
echarts (default) หรือ chartjsInteractive View (iframe):
https://wtc-fe-chart-generator.weerapol.workers.dev/view/radar?c=ENCODED_CONFIGExport as PNG:
https://wtc-fe-chart-generator.weerapol.workers.dev/export/radar.png?c=ENCODED_CONFIG&w=800&h=600&dpr=2แผนภูพิเศษท์ที่เหมาะกับการแสดงข้อมูลเชิงความสัมพันธ์
{
"type": "radar",
"option": {
"radar": {
"indicator": [
{
"name": "ความเป็นผู้นำ",
"max": 100
},
{
"name": "ความสร้างสรรค์",
"max": 100
},
{
"name": "การสื่อสาร",
"max": 100
},
{
"name": "การทำงานเป็นทีม",
"max": 100
},
{
"name": "การจัดการเวลา",
"max": 100
}
]
},
"series": [
{
"type": "radar",
"data": [
{
"value": [
90,
85,
95,
80,
88
],
"name": "ผลการประเมิน"
}
]
}
]
}
}กราฟแท่งเปรียบเทียบข้อมูลหลายหมวด
{
"type": "bar",
"option": {
"xAxis": {
"type": "category",
"data": [
"ม.ค.",
"ก.พ.",
"พ.ค.",
"มี.ค.",
"พ.ย.",
"มิ.ย."
]
},
"yAxis": {
"type": "value"
},
"series": [
{
"type": "bar",
"data": [
120,
200,
150,
80,
70,
110
]
}
]
}
}กราฟเส้นแสดงแนวโน้มข้อมูล
{
"type": "line",
"option": {
"xAxis": {
"type": "category",
"data": [
"ม.ค.",
"ก.พ.",
"พ.ค.",
"มี.ค.",
"พ.ย.",
"มิ.ย."
]
},
"yAxis": {
"type": "value"
},
"series": [
{
"type": "line",
"data": [
120,
200,
150,
80,
70,
110
],
"smooth": true
}
]
}
}กราฟวงกลมแสดงสัดส่วนของทั้งหมด
{
"type": "pie",
"option": {
"series": [
{
"type": "pie",
"data": [
{
"value": 1048,
"name": "Search Engine"
},
{
"value": 735,
"name": "Direct"
},
{
"value": 580,
"name": "Email"
},
{
"value": 484,
"name": "Union Ads"
}
]
}
]
}
}กราฟจุดกระจายแสดงความสัมพันธ์สองตัวแปร
{
"type": "scatter",
"option": {
"xAxis": {
"type": "value"
},
"yAxis": {
"type": "value"
},
"series": [
{
"type": "scatter",
"symbolSize": 10,
"data": [
[
70.23205227435585,
36.936912452383964
],
[
87.18029617865736,
76.3341693580166
],
[
40.35575934931981,
34.06245914850273
],
[
51.69996141949929,
31.55253136659255
],
[
92.20575842184905,
84.38261464330743
],
[
92.7240020830324,
11.380397864409186
],
[
42.07190292913906,
76.96638677756717
],
[
9.557744807371748,
24.883280868355573
],
[
69.34426977957457,
6.741486469653513
],
[
80.69867410999684,
8.479373547018486
],
[
28.493929169144828,
34.68744961137442
],
[
39.85368433414902,
6.278669899157152
],
[
3.3239529224449393,
35.04977964567617
],
[
76.40040414958725,
39.82845524474414
],
[
3.0563547504042,
58.07287606049575
],
[
41.1563618785973,
88.44996270399056
],
[
17.452946845768746,
81.77132024541088
],
[
58.773326026521545,
63.854257661915895
],
[
33.50001313924914,
81.17029543509624
],
[
84.7000734320978,
13.692473900348235
],
[
19.36325238078903,
27.513882754986962
],
[
23.85700825634467,
66.4894143386697
],
[
91.66764642437307,
7.58135257416277
],
[
78.99996794302703,
20.26385678675242
],
[
72.95217733462887,
46.80944760559317
],
[
47.49012307755747,
46.930378186911796
],
[
92.15444482795468,
47.12461247656873
],
[
25.4894395693956,
43.983994054280096
],
[
59.18228140426738,
63.46202434173457
],
[
48.7033548855097,
55.12086502777876
],
[
54.889553982055794,
79.7233143502924
],
[
0.04311499817228892,
53.02067605242065
],
[
70.30426039327466,
21.49901119105635
],
[
32.99546319308914,
63.65230835428053
],
[
55.46562943982085,
39.111667636206924
],
[
34.390550751458825,
30.03103840344049
],
[
52.9310757137862,
66.98064278334056
],
[
84.19848323776432,
19.919419705303522
],
[
98.32942344785029,
48.43033800018725
],
[
19.147517870372976,
50.91222220876037
],
[
7.069197333503274,
9.992412587984633
],
[
47.64144767514611,
41.55470030396974
],
[
40.49292186963025,
64.49300832209299
],
[
88.0114631666626,
75.62769043588192
],
[
26.294983877333454,
92.8425440521368
],
[
57.63097733968758,
84.41365574589736
],
[
89.07339128027486,
78.7503511797889
],
[
3.1814591236555834,
1.1435648153712341
],
[
72.13278104909982,
64.09812128763342
],
[
38.89433769859999,
10.966735078328139
]
]
}
]
}
}กราฟสีแสดงความหนาแน่นของข้อมูล
{
"type": "heatmap",
"option": {
"xAxis": {
"type": "category",
"data": [
"Mon",
"Tue",
"Wed",
"Thu",
"Fri",
"Sat",
"Sun"
]
},
"yAxis": {
"type": "category",
"data": [
"10:00",
"11:00",
"12:00",
"13:00",
"14:00",
"15:00"
]
},
"series": [
{
"type": "heatmap",
"data": [
[
0,
0,
62
],
[
1,
0,
10
],
[
2,
0,
89
],
[
3,
0,
85
],
[
4,
0,
34
],
[
5,
0,
92
],
[
0,
1,
69
],
[
1,
1,
59
],
[
2,
1,
63
],
[
3,
1,
28
],
[
4,
1,
45
],
[
5,
1,
39
],
[
0,
2,
29
],
[
1,
2,
25
],
[
2,
2,
2
],
[
3,
2,
57
],
[
4,
2,
2
],
[
5,
2,
62
],
[
0,
3,
39
],
[
1,
3,
2
],
[
2,
3,
90
],
[
3,
3,
0
],
[
4,
3,
32
],
[
5,
3,
3
],
[
0,
4,
39
],
[
1,
4,
68
],
[
2,
4,
89
],
[
3,
4,
3
],
[
4,
4,
90
],
[
5,
4,
56
],
[
0,
5,
54
],
[
1,
5,
43
],
[
2,
5,
6
],
[
3,
5,
37
],
[
4,
5,
36
],
[
5,
5,
39
],
[
0,
6,
76
],
[
1,
6,
46
],
[
2,
6,
90
],
[
3,
6,
73
],
[
4,
6,
39
],
[
5,
6,
50
]
]
}
]
}
}สำหรับ backward compatibility กับ Chart.js config ให้เพิ่ม parameter engine=chartjs ใน URL หรือ body
{
"type": "radar",
"data": {
"labels": [
"Sales",
"Admin",
"IT",
"Support",
"Dev"
],
"datasets": [
{
"label": "2024",
"data": [
90,
85,
95,
80,
88
],
"backgroundColor": "rgba(54, 162, 235, 0.2)",
"borderColor": "rgb(54, 162, 235)"
}
]
},
"options": {
"responsive": true
}
}สำหรับ large configurations หรือ programmatic access ใช้ POST API
POST /api/render{
"type": "radar",
"engine": "echarts" | "chartjs",
"option": { ... },
"width": 800,
"height": 600,
"format": "png",
"pixelRatio": 2,
"backgroundColor": "#ffffff"
}{
"success": true,
"html": "..."
}สำหรับรายละเอียด ECharts configuration format ไปที่ Apache ECharts Documentation