การสร้าง highcharts (ฮายชาร์ต) ใน HTML ธรรมดา ก็คือการสร้างกราฟแบบต่างๆขึ้นมาเพื่อแสดงข้อมูลที่ต้องการโดยสามารถสร้างได้ดังนี้
วิธีการสร้าง highcharts (ฮายชาร์ต) ใน HTML ธรรมดา ดังนี้
- 1.ในส่วนของแท็ก <head> ก็จะใส่ link ในการเรียก css และใส่แท็ก <script> ที่ใช้ในการเรียกใช้ JavaScriptโดยใส่ดังโค้ด
หรือจะเขียนแบบดึงไฟล์จากของเราเองได้ดังโค้ด (การเขียนแบบดึงไฟล์ที่เราสร้างเองจะป้องกันหากเน็ตใช้งานไม่ได้ก็ยังแสดงตัว highcharts ขึ้นมา)
โค้ด: เลือกทั้งหมด
<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>
2.ในส่วนของ <body> ก็ใส่ <div> เพื่อเรียกใช้งาน 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>
3.ใส่แท็ก <script> ดังโค้ดโค้ด: เลือกทั้งหมด
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
4.ผลลัพธ์ที่ได้ ดังรูปโค้ด: เลือกทั้งหมด
<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>
สามารถดาวโหลดไปลองเล่นได้ตามไฟล์ด้านล่าง ต้องการเวอร์ชั่นใหม่ก็สามารถเข้าไปได้ ที่นี่
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : HTML JavaScript CSS และ PHP