บริการสร้าง 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": [
[
29.97036920024424,
90.23705169076965
],
[
39.24418957388428,
1.5468650422592267
],
[
33.35362378158825,
89.19649313759149
],
[
80.75506776131344,
69.18255271277447
],
[
95.89031154190624,
16.233396097598817
],
[
54.084275233073456,
35.57119255009589
],
[
16.146699248693906,
45.971836402994505
],
[
98.60340610613042,
37.61600495465408
],
[
68.11349915536307,
0.5468619458251833
],
[
89.73204410576466,
0.5542151490272595
],
[
67.92717956806983,
36.04258374020035
],
[
86.38569135353153,
44.159568016052084
],
[
59.348033477321835,
16.036627400895554
],
[
93.2944845787896,
61.38854040032714
],
[
40.482358511597326,
80.40046664745401
],
[
1.38875650689676,
24.926727573608876
],
[
39.88799494564558,
62.47134559757088
],
[
69.81294915305595,
40.784286029763194
],
[
32.591880396837304,
4.867122752585185
],
[
60.49987872253168,
46.74836439811738
],
[
26.33855150912108,
73.79403482819602
],
[
13.384967502714884,
83.886723611586
],
[
12.919813326993157,
88.14977230079458
],
[
24.373653274781525,
1.0480863388576789
],
[
99.52412149082241,
12.02813205909965
],
[
44.76272942954422,
53.4849515487811
],
[
17.75913575835233,
56.57321783552815
],
[
23.115472478134514,
12.574369647168758
],
[
26.717237766008207,
71.94118966906049
],
[
54.29454866074433,
21.29920880337748
],
[
75.88896671307972,
67.56096118288275
],
[
85.0991017652524,
84.0962288669655
],
[
56.42064844997705,
74.08121615193946
],
[
20.658749122531617,
30.6312509693494
],
[
58.08954356736544,
85.94944641118252
],
[
26.812166420570595,
30.019866591770285
],
[
44.78074764427748,
10.868638538527364
],
[
4.02864413399977,
39.009866004267366
],
[
2.95481418571496,
89.849117905683
],
[
58.97602723786132,
41.44301424726557
],
[
9.43933674760843,
85.94471314420319
],
[
74.50515246276225,
72.58199235603475
],
[
30.13533323375611,
66.43790771139597
],
[
31.015796405547313,
25.477322902514764
],
[
52.40367999837521,
52.03700303059626
],
[
66.44752594348532,
38.2235031192219
],
[
23.969451408935903,
57.550703803833756
],
[
15.725437049657366,
88.84094784881846
],
[
98.88396558577253,
24.191379839807723
],
[
49.302485859239056,
21.08500158416057
]
]
}
]
}
}กราฟสีแสดงความหนาแน่นของข้อมูล
{
"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,
99
],
[
1,
0,
65
],
[
2,
0,
47
],
[
3,
0,
27
],
[
4,
0,
24
],
[
5,
0,
81
],
[
0,
1,
76
],
[
1,
1,
30
],
[
2,
1,
6
],
[
3,
1,
34
],
[
4,
1,
7
],
[
5,
1,
37
],
[
0,
2,
77
],
[
1,
2,
54
],
[
2,
2,
83
],
[
3,
2,
92
],
[
4,
2,
97
],
[
5,
2,
93
],
[
0,
3,
84
],
[
1,
3,
30
],
[
2,
3,
53
],
[
3,
3,
86
],
[
4,
3,
40
],
[
5,
3,
1
],
[
0,
4,
88
],
[
1,
4,
28
],
[
2,
4,
45
],
[
3,
4,
24
],
[
4,
4,
23
],
[
5,
4,
97
],
[
0,
5,
67
],
[
1,
5,
42
],
[
2,
5,
87
],
[
3,
5,
60
],
[
4,
5,
38
],
[
5,
5,
87
],
[
0,
6,
5
],
[
1,
6,
84
],
[
2,
6,
3
],
[
3,
6,
41
],
[
4,
6,
54
],
[
5,
6,
44
]
]
}
]
}
}กราฟแผนที่ภูมิศาสตร์สำหรับแสดงตำแหน่งที่ตั้ง
{
"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": [
76.76134050239853,
24.803805359082276,
2.6236879853190342,
77.77855045418296,
60.43994033273991,
39.83407613876041,
81.15060177371635,
91.55033635968762,
22.667691650456725,
90.9000494428111,
0.8717023916707034,
29.812559029193785,
9.534798176497272,
2.4688034640950485,
15.160953030058376,
37.27562867034971,
4.616593377763756,
4.301587903903902,
91.92495537451258,
47.30507346731797,
33.948514968036534,
91.89050838611885,
67.6293796361995,
6.439914744810782,
96.26114140005778,
60.09532503201347,
90.75991553008267,
39.567555250953646,
2.1667176144450684,
48.17390986826459,
98.55877720242681,
1.4010509698234697,
49.75402928142392,
81.36372303528402,
83.5058650508863,
80.00655211042591,
89.13875534497436,
12.241547012485231,
46.17151334097177,
98.22318385896212,
22.767478081510696,
85.33868969514154,
10.744218024190378,
32.58547071898541,
53.45259205480611,
68.00194449960783,
58.959376622062265,
96.29855317883903,
38.91901018860994,
50.72191405513134,
91.60670397417267,
6.774530801856948,
73.46634618745192,
86.67889382156058,
85.51420463339613,
59.41468615632731,
26.52491417196584,
5.476621403973314,
80.70446270057873,
5.72879170231817,
32.70810400642629,
92.21188178525767,
30.994281543286696,
67.9666191918661,
58.87024597081889,
66.3912503674839,
49.0335589713495,
4.773881452455353,
35.64620004961194,
15.0777421902215,
83.73020766198249,
37.386351263502995,
63.83932323825188,
84.22375707700519,
99.86543349530564,
33.283735036339145,
7.706114848452494,
67.84620965272839,
33.67018006268402,
19.650409377124845,
2.7877696686445907,
1.8485013503240277,
87.23420976687525,
55.7474966895071,
77.6128150678168,
43.720919859573,
47.07203636936102,
58.13148661239285,
72.89995731375224,
68.34646371784198,
60.81850188142066,
87.8877814962276,
56.419693533564086,
21.768121645021477,
60.01585425971042,
3.2660818934748925,
66.90636332845445,
45.21967469471014,
20.509039726640243,
99.99362584823926
]
}
]
}
}สำหรับ 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