การสร้าง Charts ด้วย Highcharts ในรูปแบบต่างๆ

แชร์ ความรู้ในการ พัฒนา Joomla Component Extension Module Plugin

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

ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 21909
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

การสร้าง Charts ด้วย Highcharts ในรูปแบบต่างๆ

โพสต์ที่ยังไม่ได้อ่าน โดย tsukasaz »

การสร้าง Charts ด้วย Highcharts ในรูปแบบต่างๆ

ใน Highcharts สามารถกำหนดรูปแบบ (Type) ได้หลายรูปแบบครับ
มาดูการสร้างในแต่ละแบบครับ

1. แบบ Line

โค้ด: เลือกทั้งหมด

<script>
    var chart;
    jQuery(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'line' //----------------- กำหนด Type เป็น line
            },
            title: {
                text: 'Average fruit consumption during one week'
            },
            xAxis: {
                categories: [
                    'Monday',
                    'Tuesday',
                    'Wednesday',
                    'Thursday',
                    'Friday',
                    'Saturday',
                    'Sunday'
                ]
            },
            yAxis: {
                title: {
                    text: 'Fruit units'
                }
            },
            series: [{
                name: 'John',
                data: [3, 4, 3, 5, 4, 10, 12]
            }, {
                name: 'Jane',
                data: [1, 3, 4, 3, 3, 5, 4]
            }]
        });
    });
</script>
<div id="container"></div>
การแสดงผล
ex_line.JPG
ex_line.JPG (23.93 KiB) Viewed 2752 times
2. แบบ Spline
Spline ตรงการแสดงเส้นจะมีโค้งเว้า แตกต่างจาก Line ที่เป็นเส้นลากตรง

โค้ด: เลือกทั้งหมด

<script>
    var chart;
    jQuery(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'spline' //----------------- กำหนด Type เป็น spline
            },
            title: {
                text: 'Average fruit consumption during one week'
            },
            xAxis: {
                categories: [
                    'Monday',
                    'Tuesday',
                    'Wednesday',
                    'Thursday',
                    'Friday',
                    'Saturday',
                    'Sunday'
                ]
            },
            yAxis: {
                title: {
                    text: 'Fruit units'
                }
            },
            series: [{
                name: 'John',
                data: [3, 4, 3, 5, 4, 10, 12]
            }, {
                name: 'Jane',
                data: [1, 3, 4, 3, 3, 5, 4]
            }]
        });
    });
</script>
<div id="container"></div>
การแสดงผล
ex_spline.JPG
ex_spline.JPG (23.53 KiB) Viewed 2752 times
3. แบบ Scatter

โค้ด: เลือกทั้งหมด

<script>
    var chart;
    jQuery(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'scatter' //----------------- กำหนด Type เป็น scatter
            },
            title: {
                text: 'Average fruit consumption during one week'
            },
            xAxis: {
                categories: [
                    'Monday',
                    'Tuesday',
                    'Wednesday',
                    'Thursday',
                    'Friday',
                    'Saturday',
                    'Sunday'
                ]
            },
            yAxis: {
                title: {
                    text: 'Fruit units'
                }
            },
            series: [{
                name: 'John',
                data: [3, 4, 3, 5, 4, 10, 12]
            }, {
                name: 'Jane',
                data: [1, 3, 4, 3, 3, 5, 4]
            }]
        });
    });
</script>
<div id="container"></div>
การแสดงผล
แนบไฟล์
ex_scatter.JPG
ex_scatter.JPG (23.26 KiB) Viewed 2752 times
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)
ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 21909
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

Re: การสร้าง Charts ด้วย Highcharts ในรูปแบบต่างๆ

โพสต์ที่ยังไม่ได้อ่าน โดย tsukasaz »

4. แบบ Area

โค้ด: เลือกทั้งหมด

<script>
    var chart;
    jQuery(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'area' //----------------- กำหนด Type เป็น area
            },
            title: {
                text: 'Average fruit consumption during one week'
            },
            xAxis: {
                categories: [
                    'Monday',
                    'Tuesday',
                    'Wednesday',
                    'Thursday',
                    'Friday',
                    'Saturday',
                    'Sunday'
                ]
            },
            yAxis: {
                title: {
                    text: 'Fruit units'
                }
            },
            series: [{
                name: 'John',
                data: [3, 4, 3, 5, 4, 10, 12]
            }, {
                name: 'Jane',
                data: [1, 3, 4, 3, 3, 5, 4]
            }]
        });
    });
</script>
<div id="container"></div>
การแสดงผล
ex_area.JPG
ex_area.JPG (22.64 KiB) Viewed 2751 times
5. แบบ Areaspline

โค้ด: เลือกทั้งหมด

<script>
    var chart;
    jQuery(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'areaspline' //----------------- กำหนด Type เป็น areaspline
            },
            title: {
                text: 'Average fruit consumption during one week'
            },
            xAxis: {
                categories: [
                    'Monday',
                    'Tuesday',
                    'Wednesday',
                    'Thursday',
                    'Friday',
                    'Saturday',
                    'Sunday'
                ]
            },
            yAxis: {
                title: {
                    text: 'Fruit units'
                }
            },
            series: [{
                name: 'John',
                data: [3, 4, 3, 5, 4, 10, 12]
            }, {
                name: 'Jane',
                data: [1, 3, 4, 3, 3, 5, 4]
            }]
        });
    });
</script>
<div id="container"></div>
การแสดงผล
ex_areaspline.JPG
ex_areaspline.JPG (22.26 KiB) Viewed 2751 times
6. แบบ Bar

โค้ด: เลือกทั้งหมด

<script>
    var chart;
    jQuery(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'bar' //----------------- กำหนด Type เป็น bar
            },
            title: {
                text: 'Average fruit consumption during one week'
            },
            xAxis: {
                categories: [
                    'Monday',
                    'Tuesday',
                    'Wednesday',
                    'Thursday',
                    'Friday',
                    'Saturday',
                    'Sunday'
                ]
            },
            yAxis: {
                title: {
                    text: 'Fruit units'
                }
            },
            series: [{
                name: 'John',
                data: [3, 4, 3, 5, 4, 10, 12]
            }, {
                name: 'Jane',
                data: [1, 3, 4, 3, 3, 5, 4]
            }]
        });
    });
</script>
<div id="container"></div>
การแสดงผล
แนบไฟล์
ex_bar.JPG
ex_bar.JPG (28.65 KiB) Viewed 2751 times
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)
ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 21909
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

Re: การสร้าง Charts ด้วย Highcharts ในรูปแบบต่างๆ

โพสต์ที่ยังไม่ได้อ่าน โดย tsukasaz »

6. แบบ Column

โค้ด: เลือกทั้งหมด

<script>
    var chart;
    jQuery(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'column' //----------------- กำหนด Type เป็น column
            },
            title: {
                text: 'Average fruit consumption during one week'
            },
            xAxis: {
                categories: [
                    'Monday',
                    'Tuesday',
                    'Wednesday',
                    'Thursday',
                    'Friday',
                    'Saturday',
                    'Sunday'
                ]
            },
            yAxis: {
                title: {
                    text: 'Fruit units'
                }
            },
            series: [{
                name: 'John',
                data: [3, 4, 3, 5, 4, 10, 12]
            }, {
                name: 'Jane',
                data: [1, 3, 4, 3, 3, 5, 4]
            }]
        });
    });
</script>
<div id="container"></div>
การแสดงผล
ex_column.JPG
ex_column.JPG (25.96 KiB) Viewed 2750 times
7. แบบ Pie
ในรูปแบบ Pie จะไม่เหมือนกับแบบอื่น ไม่มีการกำหนดแกน x แกน y
และรูปแบบของ data ใน series ก็เปลี่ียนไป ตามโค้ดตัวอย่าง

โค้ด: เลือกทั้งหมด

<script>
    var chart;
    jQuery(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'pie' //----------------- กำหนด Type เป็น pie
            },
            title: {
                text: 'Average fruit consumption during one week'
            },
            series: [{
                name: 'Fruit units',
                data: [['John',3], ['Jane',4], ['Jim',10]]
            }]
        });
    });
</script>
<div id="container"></div>
การแสดงผล
ex_pie.JPG
ex_pie.JPG (14.94 KiB) Viewed 2750 times
การทำ Stacked Charts
สามารถใช้กับรูปแบบของ Charts ด้านบนได้บางรูปแบบ โดยเพิ่มโค้ดเข้าไป

โค้ด: เลือกทั้งหมด

plotOptions: {
     column: {
          stacking: 'normal'
     }
}
โค้ดเต็ม สมมุติว่าเป็นรูปแบบ Column

โค้ด: เลือกทั้งหมด

<script>
    var chart;
    jQuery(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'column'
            },
            title: {
                text: 'Average fruit consumption during one week'
            },
            xAxis: {
                categories: [
                    'Monday',
                    'Tuesday',
                    'Wednesday',
                    'Thursday',
                    'Friday',
                    'Saturday',
                    'Sunday'
                ]
            },
            yAxis: {
                title: {
                    text: 'Fruit units'
                }
            },

            // ส่วนที่เพิ่มเข้ามาเพื่อบอกว่าเป็น Stacked Charts
            plotOptions: {
                column: {
                    stacking: 'normal'
                }
            },

            series: [{
                name: 'John',
                data: [3, 4, 3, 5, 4, 10, 12]
            }, {
                name: 'Jane',
                data: [1, 3, 4, 3, 3, 5, 4]
            }]
        });
    });
</script>
<div id="container"></div>
ex_stack.JPG
ex_stack.JPG (25.12 KiB) Viewed 2750 times
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)
ภาพประจำตัวสมาชิก
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
โพสต์: 41120
ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
ติดต่อ:

Re: การสร้าง Charts ด้วย Highcharts ในรูปแบบต่างๆ

โพสต์ที่ยังไม่ได้อ่าน โดย mindphp »

อย่าลืมเรียก jquery เข้ามาใช้งานก่อน

โค้ด: เลือกทั้งหมด

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042
ภาพประจำตัวสมาชิก
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
โพสต์: 41120
ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
ติดต่อ:

Re: การสร้าง Charts ด้วย Highcharts ในรูปแบบต่างๆ

โพสต์ที่ยังไม่ได้อ่าน โดย mindphp »

ศึกษาเพิ่มเติมได้ที่
https://www.mindphp.com/developer/36-jq ... harts.html
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042
kkk_k

Re: การสร้าง Charts ด้วย Highcharts ในรูปแบบต่างๆ

โพสต์ที่ยังไม่ได้อ่าน โดย kkk_k »

ขอสอบถามหน่อยค่ะ
คือหนูจะสร้างกราฟ แล้วให้แกน x เอาค่ามาจาก reading_time ที่เก็บอยู่ใน database
แต่พอใส่แล้วค่ามันออกมาเป็นตัวเลข id ไม่ใช่วันที่และเวลา โค้ดออกมาไม่ error แต่ไม่แสดงสิ่งที่ต้องการ หนูต้องแก้ไขยังไงคะ
kkk_k
PHP Newbie
PHP Newbie
โพสต์: 5
ลงทะเบียนเมื่อ: 23/09/2019 2:12 pm

Re: การสร้าง Charts ด้วย Highcharts ในรูปแบบต่างๆ

โพสต์ที่ยังไม่ได้อ่าน โดย kkk_k »

ขอสอบถามหน่อยค่ะ
คือหนูจะสร้างกราฟ แล้วให้แกน x เอาค่ามาจาก reading_time ที่เก็บอยู่ใน database
แต่พอใส่แล้วค่ามันออกมาเป็นตัวเลข id ไม่ใช่วันที่และเวลา โค้ดออกมาไม่ error แต่ไม่แสดงสิ่งที่ต้องการ หนูต้องแก้ไขยังไงคะ
ภาพประจำตัวสมาชิก
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
โพสต์: 41120
ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
ติดต่อ:

Re: การสร้าง Charts ด้วย Highcharts ในรูปแบบต่างๆ

โพสต์ที่ยังไม่ได้อ่าน โดย mindphp »

แกน x เปลี่ยนค่าในตัวแปล
categories
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042
ภาพประจำตัวสมาชิก
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
โพสต์: 41120
ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
ติดต่อ:

Re: การสร้าง Charts ด้วย Highcharts ในรูปแบบต่างๆ

โพสต์ที่ยังไม่ได้อ่าน โดย mindphp »

kkk_k เขียน:ขอสอบถามหน่อยค่ะ
คือหนูจะสร้างกราฟ แล้วให้แกน x เอาค่ามาจาก reading_time ที่เก็บอยู่ใน database
แต่พอใส่แล้วค่ามันออกมาเป็นตัวเลข id ไม่ใช่วันที่และเวลา โค้ดออกมาไม่ error แต่ไม่แสดงสิ่งที่ต้องการ หนูต้องแก้ไขยังไงคะ
Filed ที่ดึงมาจากฐานข้อมูลผิด หรือเปล่าครับ
ลอง เอาโค้ดตัวอย่าง และ โครงสร้างตาราง มาประกอบ
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042
kkk_k
PHP Newbie
PHP Newbie
โพสต์: 5
ลงทะเบียนเมื่อ: 23/09/2019 2:12 pm

Re: การสร้าง Charts ด้วย Highcharts ในรูปแบบต่างๆ

โพสต์ที่ยังไม่ได้อ่าน โดย kkk_k »

mindphp เขียน:
kkk_k เขียน:ขอสอบถามหน่อยค่ะ
คือหนูจะสร้างกราฟ แล้วให้แกน x เอาค่ามาจาก reading_time ที่เก็บอยู่ใน database
แต่พอใส่แล้วค่ามันออกมาเป็นตัวเลข id ไม่ใช่วันที่และเวลา โค้ดออกมาไม่ error แต่ไม่แสดงสิ่งที่ต้องการ หนูต้องแก้ไขยังไงคะ
Filed ที่ดึงมาจากฐานข้อมูลผิด หรือเปล่าครับ
ลอง เอาโค้ดตัวอย่าง และ โครงสร้างตาราง มาประกอบ

หนูลองแล้ว error ที่ line 18 ในรูปที่โชว์ line18 ค่า reading_time ถูกต้องค่ะ แต่พอตกราฟไม่ขึ้นค่ะ มีวิธีแก้ไข หรือหนูเขียนโค้ดผิดตรงไหนค่ะ
ขอบคุณค่ะ
แนบไฟล์
โค้ด
โค้ด
หน้าพอตกราฟขึ้นว่างเปล่า error line18
หน้าพอตกราฟขึ้นว่างเปล่า error line18
ตอบกลับโพส
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

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

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 20