บริการสร้าง 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": [
[
15.659233192319688,
57.275891865143315
],
[
60.91870267001915,
12.369277391006861
],
[
0.5543769146848176,
63.95217449517724
],
[
77.45399046494788,
12.097907376299567
],
[
59.39741444897242,
3.1993084138341787
],
[
69.36156444478382,
5.171172129682933
],
[
90.8137969066572,
74.69008397424035
],
[
75.02929077564555,
84.4972569758727
],
[
45.88714990618408,
22.71732850921141
],
[
82.8115575219036,
65.28738675212395
],
[
43.9940767474118,
15.529219828732543
],
[
72.72939667731619,
96.51118090213102
],
[
63.89121595680064,
42.353662845768355
],
[
98.9181475536115,
17.742936096715233
],
[
16.34640734267596,
19.762494884299198
],
[
55.332074886477876,
21.638356700299934
],
[
35.399827960445876,
36.39225015990384
],
[
49.56094603223906,
83.56054231043129
],
[
44.427754424738,
7.8529659729822505
],
[
4.895632609575539,
96.05048922443191
],
[
15.77064698581695,
73.11856182256604
],
[
58.078229695314434,
98.66356379765368
],
[
35.084450715905746,
21.969108143968818
],
[
71.13382929476822,
98.54450809530748
],
[
32.4147692269133,
79.64096613769746
],
[
95.44549563711625,
45.71976269165655
],
[
94.63338333099523,
95.74555790193067
],
[
46.9520509521998,
32.040348693558876
],
[
73.27622595491208,
92.30475149753634
],
[
68.68963719426414,
81.03153649311356
],
[
51.568275897186155,
83.91190607700922
],
[
32.900297709261174,
77.15654856956135
],
[
18.157427314437847,
96.12735890279734
],
[
70.0739603537499,
30.10732604940679
],
[
15.660221588033274,
22.84638138751829
],
[
93.34605496553095,
7.985301319848959
],
[
30.821378979559277,
82.59745282141215
],
[
62.95747892591502,
39.756377417156685
],
[
63.33807532396709,
8.841209565555408
],
[
11.876281831390989,
68.16590608571052
],
[
39.98469518031891,
17.173818691521603
],
[
64.30476163441243,
68.65015996611969
],
[
60.270185083657815,
83.7468752797107
],
[
59.27514268023688,
53.86732406697635
],
[
14.974435596624646,
44.78877599926534
],
[
47.077438811029474,
23.02046669485356
],
[
31.628083418514542,
6.014538213505727
],
[
95.66040381146996,
6.237660928774169
],
[
51.235359527851074,
30.10039514037095
],
[
95.84368674170129,
48.60073421630122
]
]
}
]
}
}กราฟสีแสดงความหนาแน่นของข้อมูล
{
"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,
61
],
[
2,
0,
74
],
[
3,
0,
74
],
[
4,
0,
53
],
[
5,
0,
79
],
[
0,
1,
82
],
[
1,
1,
13
],
[
2,
1,
35
],
[
3,
1,
95
],
[
4,
1,
90
],
[
5,
1,
62
],
[
0,
2,
94
],
[
1,
2,
92
],
[
2,
2,
44
],
[
3,
2,
61
],
[
4,
2,
99
],
[
5,
2,
13
],
[
0,
3,
42
],
[
1,
3,
71
],
[
2,
3,
1
],
[
3,
3,
11
],
[
4,
3,
4
],
[
5,
3,
87
],
[
0,
4,
40
],
[
1,
4,
60
],
[
2,
4,
62
],
[
3,
4,
47
],
[
4,
4,
81
],
[
5,
4,
29
],
[
0,
5,
27
],
[
1,
5,
86
],
[
2,
5,
32
],
[
3,
5,
71
],
[
4,
5,
64
],
[
5,
5,
88
],
[
0,
6,
12
],
[
1,
6,
79
],
[
2,
6,
43
],
[
3,
6,
95
],
[
4,
6,
0
],
[
5,
6,
19
]
]
}
]
}
}กราฟแผนที่ภูมิศาสตร์สำหรับแสดงตำแหน่งที่ตั้ง
{
"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": [
78.76022481887345,
14.90607758215875,
81.97229554362121,
61.86215778405564,
18.778716097199112,
38.87585773178637,
81.77070161886822,
80.02958755525856,
7.590819632648249,
16.750125764694644,
91.66502287971647,
4.8801934444878565,
57.07647277615534,
68.06155255276298,
10.74073317569274,
67.53744778153103,
18.35450402913391,
46.08020838838217,
71.19678932809141,
5.848880733054829,
9.438791844199468,
16.313244376469637,
62.964948099838395,
7.882793282334677,
78.66587314617193,
69.41745264935585,
39.752346170069586,
24.991541547261388,
2.3864427766653984,
42.27537392142446,
19.184462213425824,
60.27191769495944,
81.29659169078772,
38.98876542321516,
82.72580801463862,
59.33074166763792,
62.1665368312044,
52.83882021935251,
45.62638482870821,
40.838724142959634,
43.58790535932195,
40.73114838467898,
66.7312449148416,
45.33946617341582,
80.55632100373327,
30.61579057381999,
77.68955485741408,
61.966292286464665,
91.69828989638543,
66.69463470458051,
89.88535444461225,
87.67630435517016,
36.674086169743106,
76.04142679990294,
94.06674411009197,
13.414930351046516,
94.18531358725399,
95.36816912600041,
28.673347196344324,
33.14708471708442,
42.190046582566865,
71.77751806630927,
94.1583503828881,
70.5193576948459,
45.751865641088415,
37.63329238888537,
45.73953998635827,
97.10704248145895,
64.91530968652195,
5.505387461880751,
9.336809066309259,
99.04179481037035,
21.541329589707303,
86.96303279124913,
40.14512605314137,
90.45453525806825,
67.97379055774098,
29.504376601286797,
73.4967724621058,
19.744917276912787,
78.23337549890367,
70.30950944230999,
41.98911787042947,
77.3041268151482,
72.96576052342422,
73.37127612840412,
79.56074080227302,
20.58115214136119,
27.39816434319572,
76.30046242127555,
93.37982569027898,
77.09262847818579,
55.24608755365325,
14.219843023455914,
44.144134129057754,
85.16412463985138,
34.724590933553415,
95.94078619166592,
73.8183364365562,
46.6691173546
]
}
]
}
}สำหรับ 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