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

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

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

User avatar
tsukasaz
PHP VIP Members
PHP VIP Members
Posts: 10499
Joined: 18/04/2012 9:39 am

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

Post by tsukasaz » 13/11/2012 2:26 pm

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

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

1. แบบ Line

Code: Select all

<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 507 times
2. แบบ Spline
Spline ตรงการแสดงเส้นจะมีโค้งเว้า แตกต่างจาก Line ที่เป็นเส้นลากตรง

Code: Select all

<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 507 times
3. แบบ Scatter

Code: Select all

<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>
การแสดงผล
Attachments
ex_scatter.JPG
ex_scatter.JPG (23.26 KiB) Viewed 507 times
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)

User avatar
tsukasaz
PHP VIP Members
PHP VIP Members
Posts: 10499
Joined: 18/04/2012 9:39 am

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

Post by tsukasaz » 13/11/2012 2:37 pm

4. แบบ Area

Code: Select all

<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 506 times
5. แบบ Areaspline

Code: Select all

<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 506 times
6. แบบ Bar

Code: Select all

<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>
การแสดงผล
Attachments
ex_bar.JPG
ex_bar.JPG (28.65 KiB) Viewed 506 times
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)

User avatar
tsukasaz
PHP VIP Members
PHP VIP Members
Posts: 10499
Joined: 18/04/2012 9:39 am

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

Post by tsukasaz » 13/11/2012 3:16 pm

6. แบบ Column

Code: Select all

<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 505 times
7. แบบ Pie
ในรูปแบบ Pie จะไม่เหมือนกับแบบอื่น ไม่มีการกำหนดแกน x แกน y
และรูปแบบของ data ใน series ก็เปลี่ียนไป ตามโค้ดตัวอย่าง

Code: Select all

<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 505 times
การทำ Stacked Charts
สามารถใช้กับรูปแบบของ Charts ด้านบนได้บางรูปแบบ โดยเพิ่มโค้ดเข้าไป

Code: Select all

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

Code: Select all

<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 505 times
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)

User avatar
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
Posts: 22325
Joined: 22/09/2008 6:18 pm
Contact:

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

Post by mindphp » 22/09/2019 4:03 pm

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

Code: Select all

<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

User avatar
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
Posts: 22325
Joined: 22/09/2008 6:18 pm
Contact:

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

Post by mindphp » 22/09/2019 4:06 pm

ศึกษาเพิ่มเติมได้ที่
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 ในรูปแบบต่างๆ

Post by kkk_k » 23/09/2019 2:10 pm

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

kkk_k
PHP Newbie
PHP Newbie
Posts: 5
Joined: 23/09/2019 2:12 pm

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

Post by kkk_k » 23/09/2019 2:14 pm

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

User avatar
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
Posts: 22325
Joined: 22/09/2008 6:18 pm
Contact:

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

Post by mindphp » 23/09/2019 4:04 pm

แกน 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

Post Reply

Return to “Joomla Developing Knowledge”

Who is online

Users browsing this forum: No registered users and 8 guests