บริการสร้าง Chart คุณภาพสำหรับการ embed และ export รูปภาพ
Version: 1.1.1 | 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": [
[
49.25720989608926,
58.23314967589969
],
[
33.980682418444594,
84.73409617310467
],
[
27.08780289014602,
59.38117454390136
],
[
41.053428265697114,
77.98236088490347
],
[
6.867837989893455,
85.31245274527782
],
[
79.13725728850947,
20.98216182423338
],
[
71.43303982233942,
19.622188901459715
],
[
31.61549012085475,
59.682739829338956
],
[
80.57507279164724,
13.666410320187284
],
[
33.65329020019912,
71.8074079531608
],
[
85.03563498896581,
91.20828484475292
],
[
7.205510558421913,
49.82019751807254
],
[
39.094826206268216,
3.5844360660129526
],
[
86.36063050875447,
55.573437495987456
],
[
45.03637230048223,
94.03196361475443
],
[
63.378931767914715,
77.73775430183868
],
[
25.29247565944901,
99.91763335165767
],
[
10.938124181192975,
33.79563872170701
],
[
77.47233121807535,
34.020439319478804
],
[
79.73806742428117,
63.0471695861861
],
[
68.44612136519196,
74.36234816277145
],
[
74.66929669280651,
12.490851315270035
],
[
53.28451972101676,
72.63745976763289
],
[
70.98174254285962,
74.41262462059942
],
[
41.64535285779364,
5.815172466968644
],
[
29.49232149113259,
22.571307814058805
],
[
14.39237422379186,
45.5049114116636
],
[
42.446410356307,
55.37211072779334
],
[
29.107747249090423,
0.9093438023100142
],
[
90.73125594127266,
36.518622895416165
],
[
11.811569146016055,
62.92604977681312
],
[
27.659462545610104,
30.886669930335064
],
[
88.71089954737789,
10.129157131265076
],
[
83.26868151912207,
99.76109720273487
],
[
88.43026884306398,
72.06408315942157
],
[
22.181090865782615,
7.126728323998643
],
[
8.081655084077665,
83.12276930684764
],
[
38.38859577474803,
2.283060040665108
],
[
83.85016611620757,
77.32390228443316
],
[
73.82467912552883,
1.3810231399431938
],
[
34.01549956937786,
97.42437858728476
],
[
66.15314631844737,
35.702600067989664
],
[
87.87715040476894,
60.89124136706023
],
[
28.193138404262697,
25.388962300770846
],
[
10.047784567340868,
11.925064577264433
],
[
76.2643014159708,
56.59914870879324
],
[
51.10421545068557,
22.071119439326147
],
[
90.39733728454955,
11.399115964422746
],
[
47.65178357696234,
97.44346409987992
],
[
29.393174201978844,
62.19734642810847
]
]
}
]
}
}กราฟสีแสดงความหนาแน่นของข้อมูล
{
"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,
16
],
[
1,
0,
21
],
[
2,
0,
1
],
[
3,
0,
14
],
[
4,
0,
20
],
[
5,
0,
77
],
[
0,
1,
73
],
[
1,
1,
47
],
[
2,
1,
35
],
[
3,
1,
33
],
[
4,
1,
82
],
[
5,
1,
94
],
[
0,
2,
17
],
[
1,
2,
82
],
[
2,
2,
54
],
[
3,
2,
83
],
[
4,
2,
57
],
[
5,
2,
43
],
[
0,
3,
99
],
[
1,
3,
63
],
[
2,
3,
89
],
[
3,
3,
51
],
[
4,
3,
28
],
[
5,
3,
50
],
[
0,
4,
74
],
[
1,
4,
38
],
[
2,
4,
52
],
[
3,
4,
88
],
[
4,
4,
98
],
[
5,
4,
59
],
[
0,
5,
55
],
[
1,
5,
88
],
[
2,
5,
2
],
[
3,
5,
33
],
[
4,
5,
83
],
[
5,
5,
39
],
[
0,
6,
98
],
[
1,
6,
16
],
[
2,
6,
52
],
[
3,
6,
45
],
[
4,
6,
97
],
[
5,
6,
38
]
]
}
]
}
}กราฟแผนที่ภูมิศาสตร์สำหรับแสดงตำแหน่งที่ตั้ง
{
"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": [
84.77486795512965,
50.92643837822754,
32.18424469086006,
65.55685397666007,
45.83572260113933,
30.258996970770056,
75.11779541066973,
30.794407743565987,
7.798626101883032,
49.174639008735674,
24.35501847713232,
53.621399423640995,
32.091233970668284,
78.63366951342438,
63.98306937119638,
62.840065916895526,
36.26493769774254,
68.70261434673289,
73.45879375857228,
4.425819651782348,
55.960944052876116,
9.616379981101996,
76.70065501288352,
12.347481105968805,
7.4493911813745655,
14.028255923544641,
30.990517707412856,
1.9988356908825944,
63.301987041718796,
13.794998310371277,
20.629208679422938,
96.35574008148927,
24.038360066318475,
95.17379771934684,
0.7430464746187471,
23.04327170677022,
47.48634621546649,
53.05939422862891,
49.31859941089025,
31.042015551589696,
79.07866831096456,
48.479958645907374,
19.79106836362927,
90.62564739319266,
81.43232180266206,
22.236656540003718,
70.25921890573302,
37.40070476332906,
21.550546892310017,
35.360613545597154,
92.10431442689647,
34.419607679249744,
72.16785230125487,
34.96855850759025,
83.02687851174784,
65.27648096400488,
44.93907776473964,
65.47939787230773,
80.86953149941687,
14.55711832708283,
28.557599665543865,
66.95383609898802,
41.85726032372617,
56.90830556794842,
79.47292950840612,
8.674694780783954,
82.24116804021666,
81.82813279033533,
16.59939898272482,
92.9304573882415,
3.4091964527186103,
93.88187594656658,
77.32824478078845,
27.832847084074253,
70.83429965372746,
11.716612490510169,
68.12391847972539,
72.75095172854546,
52.19999283490739,
95.32035710786137,
68.7380126987395,
25.717419669990704,
12.317555981343652,
59.23986263368196,
98.69189100557288,
25.84157729919371,
40.91840321918232,
55.15975706611638,
58.736473090365784,
26.900353766010575,
22.443876342523772,
30.554883176263793,
90.16723891234345,
96.47800828903105,
27.60104930543993,
38.86326479424142,
49.74687146102149,
16.564637064258235,
66.0180290000009,
96.20959859867422
]
}
]
}
}สำหรับ 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
}
}คู่มือการใส่ Tooltip ให้กับ Map Chart เพื่อแสดงข้อมูลเมื่อ hover บนแต่ละจังหวัด/พื้นที่
เพิ่ม tooltip object ใน option เพื่อเปิดใช้งาน tooltip:
{
"type": "map",
"option": {
"tooltip": {
"trigger": "item",
"show": true
},
"visualMap": {
"min": 0,
"max": 1000,
"calculable": true,
"inRange": {
"color": [
"#e0f3f8",
"#abd9e9",
"#74add1",
"#4575b4",
"#313695"
]
}
},
"series": [
{
"type": "map",
"map": "thailand",
"data": [
{
"name": "กรุงเทพมหานคร",
"value": 1000
},
{
"name": "เชียงใหม่",
"value": 800
},
{
"name": "ภูเก็ต",
"value": 600
}
]
}
]
}
}ใช้ formatter เพื่อ customize รูปแบบการแสดงผล:
{
"type": "map",
"option": {
"tooltip": {
"trigger": "item",
"formatter": "{b}: {c} คน"
},
"series": [{
"type": "map",
"map": "thailand",
"data": [
{ "name": "กรุงเทพมหานคร", "value": 5680000 },
{ "name": "เชียงใหม่", "value": 1280000 }
]
}]
}
}
// สำหรับ format ที่ซับซ้อน ใช้ function:
// formatter: function(params) {
// return '<b>' + params.name + '</b><br/>' +
// 'ประชากร: ' + params.value.toLocaleString() + ' คน';
// }ตัวอย่างการแสดง tooltip พร้อมข้อมูลประชากรแต่ละจังหวัด:
{
"type": "map",
"option": {
"title": {
"text": "จำนวนประชากรแต่ละจังหวัด",
"left": "center"
},
"tooltip": {
"trigger": "item",
"formatter": "{b}<br/>ประชากร: {c} คน",
"backgroundColor": "rgba(50, 50, 50, 0.9)",
"borderColor": "#777",
"borderWidth": 1,
"textStyle": {
"color": "#fff",
"fontFamily": "Sarabun"
}
},
"visualMap": {
"min": 0,
"max": 6000000,
"text": [
"สูง",
"ต่ำ"
],
"calculable": true,
"inRange": {
"color": [
"#e0f7fa",
"#00838f"
]
}
},
"series": [
{
"type": "map",
"map": "thailand",
"roam": true,
"emphasis": {
"label": {
"show": true
},
"itemStyle": {
"areaColor": "#ffd54f"
}
},
"data": [
{
"name": "กรุงเทพมหานคร",
"value": 5680000
},
{
"name": "นนทบุรี",
"value": 1280000
},
{
"name": "ปทุมธานี",
"value": 1150000
},
{
"name": "เชียงใหม่",
"value": 1780000
},
{
"name": "ชลบุรี",
"value": 1560000
},
{
"name": "ภูเก็ต",
"value": 420000
},
{
"name": "สงขลา",
"value": 1450000
},
{
"name": "นครราชสีมา",
"value": 2650000
}
]
}
]
}
}ปรับแต่งสี font และ style ของ tooltip:
{
"type": "map",
"option": {
"tooltip": {
"trigger": "item",
"formatter": "{b}: {c}",
"backgroundColor": "#1a1a2e",
"borderColor": "#4a69bd",
"borderWidth": 2,
"borderRadius": 8,
"padding": [
10,
15
],
"textStyle": {
"color": "#ffffff",
"fontSize": 14,
"fontWeight": "bold",
"fontFamily": "Sarabun"
},
"extraCssText": "box-shadow: 0 4px 12px rgba(0,0,0,0.3);"
},
"series": [
{
"type": "map",
"map": "thailand",
"data": [
{
"name": "กรุงเทพมหานคร",
"value": 1000
}
]
}
]
}
}trigger: 'item' สำหรับ map chart (ไม่ใช่ 'axis')params.name คือชื่อพื้นที่, params.value คือค่าข้อมูล<br>, <b>confine: true เพื่อให้ tooltip ไม่ล้นออกนอก chartสำหรับรายละเอียด ECharts configuration format ไปที่ Apache ECharts Documentation