บริการสร้าง 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": [
[
48.01466580189463,
15.546111645133632
],
[
64.54803976320599,
21.35668917104464
],
[
60.33139474751316,
32.80374555258819
],
[
42.46766095339939,
47.09627110130038
],
[
43.377677745902574,
51.445626715259706
],
[
69.21582640145851,
19.74694682635286
],
[
12.14728792027373,
96.2804280098627
],
[
20.94217186671762,
93.52669579421165
],
[
52.80969059905344,
63.68062273091215
],
[
16.26975033868796,
33.9290565654857
],
[
28.535727570857183,
49.45647542516814
],
[
87.88195233416526,
24.120900671033286
],
[
87.63824836691639,
83.66930716789692
],
[
56.508651951120406,
92.22887925740926
],
[
90.54655082494561,
64.93405890782948
],
[
97.30463172336668,
60.87218810579581
],
[
73.32381342048669,
35.01052375532714
],
[
77.19758980363568,
1.2812351596308558
],
[
91.93426229202434,
95.20115287017241
],
[
93.25933509253345,
32.20072762421592
],
[
47.061443993766886,
21.017251941869496
],
[
57.635293931045,
24.29151859712556
],
[
29.00160248193665,
10.485766302234467
],
[
56.13419578385508,
24.99855931924707
],
[
5.041156305171379,
67.69211902728436
],
[
41.28066429538112,
25.26471366312584
],
[
72.44811157484357,
23.109756897386525
],
[
46.11090793105414,
39.288088920845865
],
[
87.02097630564067,
99.8081462855043
],
[
54.38993446818867,
77.67064662515497
],
[
25.184235465512273,
39.47838336496729
],
[
43.788432718970626,
9.110900221900097
],
[
62.33592605509478,
32.66191377210692
],
[
19.109841242406333,
81.90434561658888
],
[
54.87065230030744,
24.87331483179399
],
[
77.3070993603939,
64.62476906534343
],
[
40.24402220928847,
23.954092762314172
],
[
9.988758753492155,
93.80882244072502
],
[
64.63556966104068,
7.453999454302962
],
[
99.56098415325418,
12.555536710761029
],
[
19.84035351337451,
79.80646153111262
],
[
8.588068895317825,
50.892276564439996
],
[
84.99569381039144,
98.77812534835279
],
[
56.81722118010747,
85.5651877005874
],
[
25.562692322930967,
72.51762827301353
],
[
41.33984109158215,
26.272547183107044
],
[
13.660596701005456,
86.33173362096929
],
[
56.89976997274033,
91.86344228109445
],
[
54.65669858373202,
68.49601056003897
],
[
32.154420049792364,
44.254135877809176
]
]
}
]
}
}กราฟสีแสดงความหนาแน่นของข้อมูล
{
"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,
86
],
[
1,
0,
43
],
[
2,
0,
86
],
[
3,
0,
22
],
[
4,
0,
74
],
[
5,
0,
93
],
[
0,
1,
84
],
[
1,
1,
42
],
[
2,
1,
96
],
[
3,
1,
94
],
[
4,
1,
49
],
[
5,
1,
50
],
[
0,
2,
75
],
[
1,
2,
81
],
[
2,
2,
67
],
[
3,
2,
43
],
[
4,
2,
36
],
[
5,
2,
55
],
[
0,
3,
92
],
[
1,
3,
78
],
[
2,
3,
56
],
[
3,
3,
30
],
[
4,
3,
60
],
[
5,
3,
54
],
[
0,
4,
64
],
[
1,
4,
18
],
[
2,
4,
42
],
[
3,
4,
20
],
[
4,
4,
81
],
[
5,
4,
49
],
[
0,
5,
76
],
[
1,
5,
83
],
[
2,
5,
48
],
[
3,
5,
3
],
[
4,
5,
8
],
[
5,
5,
20
],
[
0,
6,
41
],
[
1,
6,
13
],
[
2,
6,
82
],
[
3,
6,
37
],
[
4,
6,
72
],
[
5,
6,
81
]
]
}
]
}
}กราฟแผนที่ภูมิศาสตร์สำหรับแสดงตำแหน่งที่ตั้ง
{
"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": [
57.15221941570496,
59.76532255477925,
43.07300382653405,
46.98812961822833,
59.33592205123222,
12.303800330011061,
87.56344501327229,
42.429778044044944,
77.58475588804528,
10.30537502993174,
36.61860243797614,
77.63493730741207,
45.504658802678456,
24.19335587708965,
32.263557494126346,
36.71249849680432,
41.394757478748026,
13.279310392822008,
53.12914878413966,
72.95724412042391,
10.639140228922406,
9.743650851937446,
41.791708855956465,
99.63257041783375,
92.99437016733432,
14.385524809671946,
10.785528148077283,
17.824202393419064,
75.0740719024553,
10.266610216574456,
45.32760670399778,
54.02108011703311,
32.9036472300338,
82.7838342314783,
48.458098455604095,
31.608413042634133,
41.12025068443621,
42.60376356283796,
16.588443122665286,
45.8386145179507,
82.19876747529202,
6.181329998351814,
10.464572744351951,
49.184824272498304,
38.440209963114825,
3.4452222012765654,
5.106577759038123,
70.93800299520339,
35.06157756657641,
63.137409802576514,
71.44644929655574,
89.27770379941947,
36.74241752224351,
57.460985856040246,
58.138386166619085,
83.19291152404608,
93.7621664428989,
99.91587066936181,
46.82594953514824,
74.88631763264245,
37.939016849005384,
25.064856553377624,
96.93072487420964,
15.565463821340996,
77.15527290653903,
36.07204963063114,
0.42521520697326176,
80.24509878215869,
41.919436338522075,
82.99565496272334,
47.441948411965654,
41.84089904137378,
77.43067528928287,
35.24001724736875,
27.4880563803789,
95.40172105846112,
47.63138212094713,
18.48449467207689,
57.4235163957775,
59.056009829165426,
33.06117727140624,
2.6278782862846795,
0.7050888960551172,
57.27449090104323,
16.824721132116494,
45.3031267849374,
19.46029534478785,
52.185523595537106,
40.78097026211748,
87.99447782393247,
33.005146296376395,
50.71456342680436,
83.43373529556065,
29.89168353495817,
44.376690435249934,
86.37090837776414,
55.8132039770706,
64.05494607344977,
90.75672443188834,
62.19101270213836
]
}
]
}
}สำหรับ 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