โดย Parichat » 01/05/2018 4:05 pm
การสร้าง highcharts (ฮายชาร์ต) ใน HTML ธรรมดา
การสร้าง highcharts (ฮายชาร์ต) ใน HTML ธรรมดา ก็คือการสร้างกราฟแบบต่างๆขึ้นมาเพื่อแสดงข้อมูลที่ต้องการโดยสามารถสร้างได้ดังนี้
วิธีการสร้าง highcharts (ฮายชาร์ต) ใน HTML ธรรมดา ดังนี้
- 1.ในส่วนของแท็ก <head> ก็จะใส่ link ในการเรียก css และใส่แท็ก <script> ที่ใช้ในการเรียกใช้ JavaScriptโดยใส่ดังโค้ด
โค้ด: เลือกทั้งหมด
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
หรือจะเขียนแบบดึงไฟล์จากของเราเองได้ดังโค้ด (การเขียนแบบดึงไฟล์ที่เราสร้างเองจะป้องกันหากเน็ตใช้งานไม่ได้ก็ยังแสดงตัว highcharts ขึ้นมา)
โค้ด: เลือกทั้งหมด
<script src="javaScript/highcharts.js" type="text/javascript"></script>
<script src="javaScript/data.js" type="text/javascript"></script>
<script src="javaScript/drilldown.js" type="text/javascript"></script>
2.ในส่วนของ <body> ก็ใส่ <div> เพื่อเรียกใช้งาน highcharts (ฮายชาร์ต) ดังโค้ด
โค้ด: เลือกทั้งหมด
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
3.ใส่แท็ก <script> ดังโค้ด
โค้ด: เลือกทั้งหมด
<script>
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
//เป็นหัวข้อตาราง
text: 'Test 2018'
},
subtitle: {
text: 'ศึกษาเพิ่มเติมได้ที่นี้: <a href="https://www.mindphp.com/" target="_blank">mindphp.com</a>'
},
xAxis: {
//แกน x ของกราฟ
type: 'category'
},
yAxis: {
title: {
//แกน ของกราฟ
text: 'Total'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
//ข้อมูลที่ปรากฏตรงกราฟแต่ละแท่ง
"series": [
{
"name": "Browsers",
"colorByPoint": true,
"data": [
{
"name": "Chrome",
"y": 62.74,
"drilldown": "Chrome"
},
{
"name": "Firefox",
"y": 10.57,
"drilldown": "Firefox"
},
{
"name": "Internet Explorer",
"y": 7.23,
"drilldown": "Internet Explorer"
},
{
"name": "Safari",
"y": 5.58,
"drilldown": "Safari"
},
{
"name": "Edge",
"y": 4.02,
"drilldown": "Edge"
},
{
"name": "Opera",
"y": 1.92,
"drilldown": "Opera"
},
{
"name": "Other",
"y": 7.62,
"drilldown": null
}
]
}
],
"drilldown": {
"series": [
{
"name": "Chrome",
"id": "Chrome",
"data": [
[
"v65.0",
0.1
],
[
"v64.0",
1.3
],
[
"v63.0",
53.02
],
[
"v62.0",
1.4
],
[
"v61.0",
0.88
],
[
"v60.0",
0.56
],
[
"v59.0",
0.45
],
[
"v58.0",
0.49
],
[
"v57.0",
0.32
],
[
"v56.0",
0.29
],
[
"v55.0",
0.79
],
[
"v54.0",
0.18
],
[
"v51.0",
0.13
],
[
"v49.0",
2.16
],
[
"v48.0",
0.13
],
[
"v47.0",
0.11
],
[
"v43.0",
0.17
],
[
"v29.0",
0.26
]
]
},
{
"name": "Firefox",
"id": "Firefox",
"data": [
[
"v58.0",
1.02
],
[
"v57.0",
7.36
],
[
"v56.0",
0.35
],
[
"v55.0",
0.11
],
[
"v54.0",
0.1
],
[
"v52.0",
0.95
],
[
"v51.0",
0.15
],
[
"v50.0",
0.1
],
[
"v48.0",
0.31
],
[
"v47.0",
0.12
]
]
},
{
"name": "Internet Explorer",
"id": "Internet Explorer",
"data": [
[
"v11.0",
6.2
],
[
"v10.0",
0.29
],
[
"v9.0",
0.27
],
[
"v8.0",
0.47
]
]
},
{
"name": "Safari",
"id": "Safari",
"data": [
[
"v11.0",
3.39
],
[
"v10.1",
0.96
],
[
"v10.0",
0.36
],
[
"v9.1",
0.54
],
[
"v9.0",
0.13
],
[
"v5.1",
0.2
]
]
},
{
"name": "Edge",
"id": "Edge",
"data": [
[
"v16",
2.6
],
[
"v15",
0.92
],
[
"v14",
0.4
],
[
"v13",
0.1
]
]
},
{
"name": "Opera",
"id": "Opera",
"data": [
[
"v50.0",
0.96
],
[
"v49.0",
0.82
],
[
"v12.1",
0.14
]
]
}
]
}
});
</script>
4.ผลลัพธ์ที่ได้ ดังรูป
โดยข้อมูลสามารถแก้ไขได้หรือจะดึงมาจากฐานข้อมูลก็ได้แล้วแต่การนำไปใช้งานในแต่ละกรณีไป
สามารถดาวโหลดไปลองเล่นได้ตามไฟล์ด้านล่าง
ต้องการเวอร์ชั่นใหม่ก็สามารถเข้าไปได้
ที่นี่
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : HTML JavaScript CSS และ PHP
[b][size=150][color=#FF8080]การสร้าง highcharts (ฮายชาร์ต) ใน HTML ธรรมดา[/color][/size][/b]
[b][color=#FF40BF]การสร้าง [url=https://www.mindphp.com/developer/36-jquery/2397-jquery-%E0%B8%97%E0%B8%B3%E0%B8%81%E0%B8%A3%E0%B8%B2%E0%B8%9F-%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2-highcharts.html]highcharts[/url] (ฮายชาร์ต) ใน [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-html5/2479-%E0%B8%9A%E0%B8%97%E0%B8%97%E0%B8%B5%E0%B9%88-1-html5-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A331.html]HTML[/url] ธรรมดา[/color][/b] ก็คือการสร้างกราฟแบบต่างๆขึ้นมาเพื่อแสดงข้อมูลที่ต้องการโดยสามารถสร้างได้ดังนี้
[b][color=#FF40FF]วิธีการสร้าง highcharts (ฮายชาร์ต) ใน HTML ธรรมดา ดังนี้[/color][/b]
[list]1.ในส่วนของแท็ก <head> ก็จะใส่ link ในการเรียก [url=https://www.mindphp.com/vdo-tutorial-css3/3795-css3-tutorial-01-basic-css.html]css[/url] และใส่แท็ก <script> ที่ใช้ในการเรียกใช้ [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%AA%E0%B8%AD%E0%B8%99-javascript/2724-%E0%B8%9A%E0%B8%97%E0%B8%97%E0%B8%B5%E0%B9%88-1-javascript-introduction.html]JavaScript[/url]โดยใส่ดังโค้ด
[code]<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>[/code]
หรือจะเขียนแบบดึงไฟล์จากของเราเองได้ดังโค้ด (การเขียนแบบดึงไฟล์ที่เราสร้างเองจะป้องกันหากเน็ตใช้งานไม่ได้ก็ยังแสดงตัว highcharts ขึ้นมา)
[code]<script src="javaScript/highcharts.js" type="text/javascript"></script>
<script src="javaScript/data.js" type="text/javascript"></script>
<script src="javaScript/drilldown.js" type="text/javascript"></script>[/code]
2.ในส่วนของ <body> ก็ใส่ <div> เพื่อเรียกใช้งาน highcharts (ฮายชาร์ต) ดังโค้ด
[code]<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>[/code]
3.ใส่แท็ก <script> ดังโค้ด
[code]<script>
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
//เป็นหัวข้อตาราง
text: 'Test 2018'
},
subtitle: {
text: 'ศึกษาเพิ่มเติมได้ที่นี้: <a href="https://www.mindphp.com/" target="_blank">mindphp.com</a>'
},
xAxis: {
//แกน x ของกราฟ
type: 'category'
},
yAxis: {
title: {
//แกน ของกราฟ
text: 'Total'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
//ข้อมูลที่ปรากฏตรงกราฟแต่ละแท่ง
"series": [
{
"name": "Browsers",
"colorByPoint": true,
"data": [
{
"name": "Chrome",
"y": 62.74,
"drilldown": "Chrome"
},
{
"name": "Firefox",
"y": 10.57,
"drilldown": "Firefox"
},
{
"name": "Internet Explorer",
"y": 7.23,
"drilldown": "Internet Explorer"
},
{
"name": "Safari",
"y": 5.58,
"drilldown": "Safari"
},
{
"name": "Edge",
"y": 4.02,
"drilldown": "Edge"
},
{
"name": "Opera",
"y": 1.92,
"drilldown": "Opera"
},
{
"name": "Other",
"y": 7.62,
"drilldown": null
}
]
}
],
"drilldown": {
"series": [
{
"name": "Chrome",
"id": "Chrome",
"data": [
[
"v65.0",
0.1
],
[
"v64.0",
1.3
],
[
"v63.0",
53.02
],
[
"v62.0",
1.4
],
[
"v61.0",
0.88
],
[
"v60.0",
0.56
],
[
"v59.0",
0.45
],
[
"v58.0",
0.49
],
[
"v57.0",
0.32
],
[
"v56.0",
0.29
],
[
"v55.0",
0.79
],
[
"v54.0",
0.18
],
[
"v51.0",
0.13
],
[
"v49.0",
2.16
],
[
"v48.0",
0.13
],
[
"v47.0",
0.11
],
[
"v43.0",
0.17
],
[
"v29.0",
0.26
]
]
},
{
"name": "Firefox",
"id": "Firefox",
"data": [
[
"v58.0",
1.02
],
[
"v57.0",
7.36
],
[
"v56.0",
0.35
],
[
"v55.0",
0.11
],
[
"v54.0",
0.1
],
[
"v52.0",
0.95
],
[
"v51.0",
0.15
],
[
"v50.0",
0.1
],
[
"v48.0",
0.31
],
[
"v47.0",
0.12
]
]
},
{
"name": "Internet Explorer",
"id": "Internet Explorer",
"data": [
[
"v11.0",
6.2
],
[
"v10.0",
0.29
],
[
"v9.0",
0.27
],
[
"v8.0",
0.47
]
]
},
{
"name": "Safari",
"id": "Safari",
"data": [
[
"v11.0",
3.39
],
[
"v10.1",
0.96
],
[
"v10.0",
0.36
],
[
"v9.1",
0.54
],
[
"v9.0",
0.13
],
[
"v5.1",
0.2
]
]
},
{
"name": "Edge",
"id": "Edge",
"data": [
[
"v16",
2.6
],
[
"v15",
0.92
],
[
"v14",
0.4
],
[
"v13",
0.1
]
]
},
{
"name": "Opera",
"id": "Opera",
"data": [
[
"v50.0",
0.96
],
[
"v49.0",
0.82
],
[
"v12.1",
0.14
]
]
}
]
}
});
</script>[/code]
4.ผลลัพธ์ที่ได้ ดังรูป
[img]http://snap.mindphp.com/index.php?view=2018May01_5ae824ee7173e[/img]
[/list]
โดยข้อมูลสามารถแก้ไขได้หรือจะดึงมาจากฐานข้อมูลก็ได้แล้วแต่การนำไปใช้งานในแต่ละกรณีไป
สามารถดาวโหลดไปลองเล่นได้ตามไฟล์ด้านล่าง
[attachment=0]testtest.zip[/attachment]
ต้องการเวอร์ชั่นใหม่ก็สามารถเข้าไปได้ [url=https://www.highcharts.com/download]ที่นี่[/url]
[b]ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : HTML JavaScript CSS และ PHP[/b]
[list]
- [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-css.html]บทความเกี่ยวกับ css[/url]
- [url=https://www.mindphp.com/developer/20-javascript.html]บทความเกี่ยวกับ JavaScript[/url]
- [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-html.html]บทเรียน HTML[/url]
- [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-html5.html]บทเรียน HTML5[/url]
- [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%AA%E0%B8%AD%E0%B8%99-javascript.html]บทเรียน JavaScript[/url]
- [url=https://www.mindphp.com/forums/viewforum.php?f=6]ถามตอบเกี่ยวกับ PHP[/url]
- [url=https://www.mindphp.com/forums/viewforum.php?f=73]ศึกษาเพิ่มเติมเกี่ยวกับ css[/url]
[/list]