บริการสร้าง 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": [
[
93.74170304189637,
90.87971923705143
],
[
77.99595524560675,
52.01077955563642
],
[
97.6323457431847,
49.16341282324328
],
[
3.0272183800168717,
91.35342387133474
],
[
99.47182085826032,
56.233972666613255
],
[
33.35852902790458,
66.75952643148703
],
[
70.74029595723623,
88.81433714187938
],
[
61.551444964690184,
26.84786824794734
],
[
82.15598811673522,
12.737909566003902
],
[
8.305468823369399,
61.05387950757349
],
[
0.18480413411428032,
18.177952888786177
],
[
17.041038136869968,
83.66288957943789
],
[
18.780225258960947,
84.75281599206622
],
[
84.58638565670084,
33.89839435499836
],
[
27.56976902479259,
71.41834231883352
],
[
66.67351915690058,
75.07541937139563
],
[
57.39852798551427,
91.03065458250754
],
[
61.63616964168305,
51.34069532609611
],
[
4.91132592110074,
91.49305359659039
],
[
76.05402818944535,
20.666344670110437
],
[
34.11231204535369,
97.2580951436065
],
[
27.774420590724624,
11.161515792621234
],
[
86.6477872872224,
45.23148299570521
],
[
80.39412386101819,
52.525225814746626
],
[
8.32415442676031,
2.2562439985084115
],
[
16.033074612675215,
94.93064658033356
],
[
26.941185957986292,
11.737552850950673
],
[
81.66323938326127,
38.8578496714412
],
[
17.27915286586925,
43.24481049345138
],
[
36.760797893460925,
54.63932288526062
],
[
71.57254844404595,
32.127274333066524
],
[
89.435305536425,
28.52914937823282
],
[
91.02383972941853,
29.655982798192117
],
[
8.004730132298954,
72.21216180811881
],
[
64.7092698479666,
31.04637720677742
],
[
17.47693415730177,
38.61213298348123
],
[
32.6281918481821,
9.013657710037359
],
[
50.49038239857803,
65.22063898020758
],
[
70.80393501343761,
31.359735224965846
],
[
42.027033117312925,
92.61512978890705
],
[
45.74088848229083,
78.73433542317063
],
[
19.84724804211989,
42.966079583418015
],
[
6.210801902675778,
76.8925203446605
],
[
68.64049409810347,
91.42011407656429
],
[
15.161884366319189,
85.44071456654169
],
[
51.91252459941942,
49.102390768611194
],
[
51.36007558122127,
71.95155976399332
],
[
55.265990865187185,
60.79911313091356
],
[
0.9263747457205707,
66.87043628350285
],
[
64.22702054898245,
93.24661518575745
]
]
}
]
}
}กราฟสีแสดงความหนาแน่นของข้อมูล
{
"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,
54
],
[
1,
0,
47
],
[
2,
0,
81
],
[
3,
0,
98
],
[
4,
0,
45
],
[
5,
0,
11
],
[
0,
1,
62
],
[
1,
1,
22
],
[
2,
1,
96
],
[
3,
1,
67
],
[
4,
1,
42
],
[
5,
1,
74
],
[
0,
2,
80
],
[
1,
2,
0
],
[
2,
2,
56
],
[
3,
2,
61
],
[
4,
2,
96
],
[
5,
2,
31
],
[
0,
3,
24
],
[
1,
3,
29
],
[
2,
3,
7
],
[
3,
3,
95
],
[
4,
3,
13
],
[
5,
3,
66
],
[
0,
4,
91
],
[
1,
4,
4
],
[
2,
4,
82
],
[
3,
4,
75
],
[
4,
4,
59
],
[
5,
4,
58
],
[
0,
5,
22
],
[
1,
5,
58
],
[
2,
5,
28
],
[
3,
5,
23
],
[
4,
5,
57
],
[
5,
5,
59
],
[
0,
6,
94
],
[
1,
6,
39
],
[
2,
6,
40
],
[
3,
6,
43
],
[
4,
6,
93
],
[
5,
6,
1
]
]
}
]
}
}กราฟแผนที่ภูมิศาสตร์สำหรับแสดงตำแหน่งที่ตั้ง
{
"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": [
79.08485773465543,
59.88466529557853,
56.312832902747644,
29.702297351028605,
2.0819272140276235,
53.3220074638399,
14.637438845985084,
8.574024262345558,
80.31189512086362,
12.057561102787307,
96.03337782544051,
55.976645420813085,
33.784273404903374,
37.02208508724093,
70.79573650649486,
48.0197178912877,
70.17060565679367,
77.01317130149657,
31.49900730315861,
46.51601852835845,
69.7784835502579,
67.26614910110193,
55.3077267521067,
3.420683316862516,
2.225930547999211,
86.0765624583333,
16.2193949510679,
46.63716357788641,
41.25898944747766,
23.687538218016257,
32.1599542600105,
44.872809908590824,
59.19765722925961,
53.33113219184342,
21.078166876305872,
82.96701204791988,
32.36860240182441,
34.21591357918394,
1.7315744997470128,
1.0422535844913816,
34.591277052551014,
28.89586668049382,
93.3694235218563,
88.52343273135608,
48.907025793549494,
87.82155207473788,
3.4475041270790374,
57.66444755030692,
21.39760311779154,
77.27610828383499,
30.42549335351119,
24.48479885952738,
22.206785893874525,
70.36524666319815,
92.60227001333293,
27.13725620191738,
48.49683513205216,
14.124869346706825,
97.42098076459818,
49.447231257177414,
89.48988467601882,
98.82969360355108,
31.873545437656947,
54.934908811813656,
15.65517238087233,
1.559178882484491,
40.78277999190607,
48.29606084492198,
74.03718749027482,
57.478704385103605,
88.77821796607375,
58.33658919095556,
85.84791767854357,
24.01181428807305,
9.790298043909695,
92.67711278941748,
47.416906305524954,
69.23282952585762,
43.241621910664016,
79.81651960329378,
10.88339957879052,
85.76051611528369,
6.087091908992792,
97.34484277337776,
49.72059176035488,
60.12502821788088,
21.900208221965812,
95.7935225527409,
38.06674835379168,
86.56564586085615,
22.59393027365895,
16.506657645865054,
13.469982982326744,
19.7277550950998,
36.66807777002429,
83.87167548790441,
92.20509894004417,
71.62435232211362,
58.14770060451389,
59.29843473312582
]
}
]
}
}สำหรับ 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