บริการสร้าง Chart คุณภาพสำหรับการ embed และ export รูปภาพ
Version: 1.1.0 | WE Tech Consulting Co.,Ltd
WTC Chart Generator รองรับการสร้าง Chart ผ่าน URL สำหรับการใช้งานกับ GlideApps, Web Embed, หรือการ export รูปภาพ
echarts (default) หรือ chartjsInteractive View (iframe):
https://wtc-fe-chart-generator.pages.dev/view/radar?c=ENCODED_CONFIGExport as PNG:
https://wtc-fe-chart-generator.pages.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": [
[
30.58974731732459,
52.908860853858606
],
[
63.09521978635891,
77.30670772358356
],
[
90.06243693336735,
12.68299823573049
],
[
76.45515759044295,
65.83478400565313
],
[
54.2376470768802,
14.545711644074533
],
[
67.3260920695782,
42.716567533546105
],
[
15.508406294214128,
18.214020704908364
],
[
71.83636646268732,
69.23650391489507
],
[
16.14295169750526,
45.39197702528919
],
[
81.77667290280915,
1.3302367292232775
],
[
41.408428922729755,
85.15150941072068
],
[
5.290071595510648,
36.785040160963014
],
[
3.034443088890615,
85.83303384404653
],
[
4.199073218738569,
34.82200027778891
],
[
8.835921053118012,
86.29474786834807
],
[
53.36309968543327,
66.87155964340397
],
[
97.32144961906567,
32.99504465182762
],
[
26.936415509830947,
89.64283415098001
],
[
59.82220137259128,
92.54970218834751
],
[
75.32068104961503,
51.54384151411985
],
[
82.91842858701202,
92.48808154604902
],
[
23.743436683777798,
38.054936433050734
],
[
27.707590083340182,
44.25339008575032
],
[
27.990283317040976,
21.461953254120903
],
[
46.36487255777422,
45.91433660684932
],
[
41.99972838610279,
34.37580643112338
],
[
21.8456367288548,
7.426073916879328
],
[
89.10085023136176,
59.560999616881304
],
[
91.86838526614731,
22.211329995254957
],
[
38.323176473584056,
78.14930236512403
],
[
71.50455783259132,
1.8168678660760662
],
[
56.59104230110857,
78.26412637344158
],
[
24.080395331367153,
8.952812838965096
],
[
28.128164202728446,
56.41127008439941
],
[
53.155824520753434,
94.36956672497189
],
[
15.07793939833222,
12.906763890446149
],
[
81.59215057655506,
52.40302140902629
],
[
51.12951051596391,
3.4024721008714898
],
[
26.74004141535956,
26.84309440546464
],
[
89.08689183070852,
14.185029403482341
],
[
73.58325180231046,
1.274498426229187
],
[
7.874265183112095,
94.55303135455642
],
[
13.977340149480899,
91.0253946357684
],
[
51.63478549488464,
35.83383854170775
],
[
77.60186571895585,
49.35957613324713
],
[
76.70658765369986,
94.32227972550784
],
[
84.31855082691237,
65.94080614940438
],
[
97.68421541078082,
55.93400923126174
],
[
23.633220348441697,
34.942320541385364
],
[
91.47158473958322,
73.33239526858128
]
]
}
]
}
}กราฟสีแสดงความหนาแน่นของข้อมูล
{
"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,
17
],
[
1,
0,
6
],
[
2,
0,
98
],
[
3,
0,
25
],
[
4,
0,
70
],
[
5,
0,
94
],
[
0,
1,
30
],
[
1,
1,
53
],
[
2,
1,
65
],
[
3,
1,
34
],
[
4,
1,
45
],
[
5,
1,
46
],
[
0,
2,
20
],
[
1,
2,
51
],
[
2,
2,
40
],
[
3,
2,
48
],
[
4,
2,
51
],
[
5,
2,
45
],
[
0,
3,
52
],
[
1,
3,
10
],
[
2,
3,
46
],
[
3,
3,
3
],
[
4,
3,
22
],
[
5,
3,
8
],
[
0,
4,
96
],
[
1,
4,
96
],
[
2,
4,
59
],
[
3,
4,
46
],
[
4,
4,
69
],
[
5,
4,
78
],
[
0,
5,
61
],
[
1,
5,
62
],
[
2,
5,
69
],
[
3,
5,
24
],
[
4,
5,
57
],
[
5,
5,
21
],
[
0,
6,
3
],
[
1,
6,
52
],
[
2,
6,
47
],
[
3,
6,
68
],
[
4,
6,
21
],
[
5,
6,
5
]
]
}
]
}
}กราฟแผนที่ภูมิศาสตร์สำหรับแสดงตำแหน่งที่ตั้ง
{
"type": "geo",
"option": {
"geo": {
"map": "thailand",
"roam": true
},
"series": [
{
"type": "scatter",
"coordinateSystem": "geo",
"data": [
{
"name": "กรุงเทพฯ",
"value": [
100.5018,
13.7563,
100
]
},
{
"name": "เชียงใหม่",
"value": [
98.9853,
18.7883,
80
]
},
{
"name": "ภูเก็ต",
"value": [
98.3923,
7.8804,
60
]
}
]
}
]
}
}กราฟแผนที่แสดงข้อมูลในแต่ละพื้นที่
{
"type": "map",
"option": {
"visualMap": {
"min": 0,
"max": 1000,
"calculable": true,
"inRange": {
"color": [
"#50a3ba",
"#eac736",
"#d94e5d"
]
}
},
"series": [
{
"type": "map",
"map": "thailand",
"data": [
{
"name": "กรุงเทพมหานคร",
"value": 1000
},
{
"name": "เชียงใหม่",
"value": 800
},
{
"name": "ภูเก็ต",
"value": 600
},
{
"name": "พัทยา",
"value": 500
}
]
}
]
}
}กราฟแสดงการกระจายของข้อมูลเชิงความถี่
{
"type": "histogram",
"option": {
"xAxis": {
"type": "value"
},
"yAxis": {
"type": "value"
},
"series": [
{
"type": "line",
"data": [
88.00116598717119,
20.19514892109573,
21.34411466805051,
37.171549898578824,
55.55951428421082,
88.14344636246256,
3.6579702891784582,
62.45498620687493,
68.6603326001727,
22.006484514252346,
58.00713319573677,
13.301025055197059,
10.732838507794252,
78.82583069700328,
61.97587180272377,
35.15868816394019,
82.48166256558818,
15.1532163909901,
49.70005915941322,
73.59072690528585,
5.085847526162723,
79.92372047627481,
66.81779825445741,
4.446639542798881,
36.75983071899807,
38.078296987406816,
14.072431638767535,
39.66854349740997,
60.00842266504649,
60.18289076280475,
82.7089689943571,
11.438985396282298,
75.60918889983019,
36.642119548702,
0.28012858110537664,
1.8113330335852718,
88.55924758925865,
41.037329891136096,
36.5560333823739,
82.62524460406723,
73.34288406167686,
33.033431119815894,
7.100800721568712,
51.59422264116314,
25.55093991285151,
45.081899601253575,
31.0828224121778,
12.909260038241953,
62.97127223744423,
77.72602767464997,
45.18621829065259,
88.67045043430416,
43.45293045390984,
59.65536886237943,
81.97886385521379,
9.592996507311302,
18.665696251038312,
60.83117255465322,
23.76385848881225,
5.1600402267171,
65.96357708288096,
99.23734871330336,
81.10893412420256,
45.98700832624868,
66.01055791070235,
50.050248257711715,
74.83040202883673,
34.159033373608786,
32.421317190504396,
43.581347352794864,
26.55792047393749,
10.347803398670196,
2.585092925763899,
30.731361101206,
22.61685178811256,
43.402737559857066,
91.07988681424057,
99.26381614934996,
38.36224969628049,
45.61814306386811,
83.86012704069148,
23.462163946756597,
38.18955475546113,
25.524284123814866,
99.63930097861508,
41.54339221304709,
42.77875417564411,
59.89115353888606,
92.64893241371308,
34.21071785422725,
52.50598359935951,
16.289628721929304,
34.49079808758435,
31.219620965542926,
74.52202109460686,
82.09406897781226,
59.775048429529676,
92.48626074196513,
24.663684267128506,
74.31956622138384
]
}
]
}
}สำหรับ 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
}
}สำหรับรายละเอียด ECharts configuration format ไปที่ Apache ECharts Documentation