การสร้าง highcharts (ฮายชาร์ต) ใน HTML ธรรมดา

หมวดสำหรับแบ่งบันความ รู้ต่างๆ จะมีหมวดย่อยๆ ในหมวดนี้ เช่น php, SQL, XML, CSS

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
Parichat
PHP VIP Members
PHP VIP Members
โพสต์: 2410
ลงทะเบียนเมื่อ: 08/01/2018 10:03 am

การสร้าง highcharts (ฮายชาร์ต) ใน HTML ธรรมดา

โพสต์โดย 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="http://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.ผลลัพธ์ที่ได้ ดังรูป
    รูปภาพ

โดยข้อมูลสามารถแก้ไขได้หรือจะดึงมาจากฐานข้อมูลก็ได้แล้วแต่การนำไปใช้งานในแต่ละกรณีไป

สามารถดาวโหลดไปลองเล่นได้ตามไฟล์ด้านล่าง
testtest.zip
(83.76 KiB) ดาวน์โหลด 21 ครั้ง


ต้องการเวอร์ชั่นใหม่ก็สามารถเข้าไปได้ ที่นี่

ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : HTML JavaScript CSS และ PHP
Live Simply, Laugh Often, Love Deeply.....

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 123 และ บุคคลทั่วไป 0 ท่าน