Page 1 of 2

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

Posted: 13/11/2012 2:26 pm
by tsukasaz
การสร้าง 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 983 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 983 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>
การแสดงผล

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

Posted: 13/11/2012 2:37 pm
by tsukasaz
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 982 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 982 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>
การแสดงผล

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

Posted: 13/11/2012 3:16 pm
by tsukasaz
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 981 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 981 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 981 times

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

Posted: 22/09/2019 4:03 pm
by mindphp
อย่าลืมเรียก jquery เข้ามาใช้งานก่อน

Code: Select all

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

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

Posted: 22/09/2019 4:06 pm
by mindphp
ศึกษาเพิ่มเติมได้ที่
https://www.mindphp.com/developer/36-jq ... harts.html

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

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

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

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

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

Posted: 23/09/2019 4:04 pm
by mindphp
แกน x เปลี่ยนค่าในตัวแปล
categories