วิธีการกำหนด option ของ highcharts ให้ดูง่ายขึ้น

09 June 2015 By Ninenik Narkdee

highcharts กราฟ export

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ highcharts กราฟ export

เทคนิคเนื้อหาส่วนนี้เป็นวิธีการกำหนด option ให้กับ highcharts

เพื่อจัดรูปแบบของ กราฟให้ดูง่าย โดยเป็นการแยกในส่วนของ option

มาไว้อีกไฟล์หนึ่ง

โค้ดของไฟล์ตัวอย่างจากบทความก่อนหน้า

<!DOCTYPE html>  
<html lang="en">  
  
<head>  
    <meta charset="UTF-8">  
    <title>Highcharts</title>  
</head>  
  
<body>  
  
<div style="width:80%;margin:auto;">  
  
    <div id="hc_container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>  
  
</div>  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  
<script src="http://code.highcharts.com/highcharts.js"></script>  
<script src="http://code.highcharts.com/modules/exporting.js"></script>  
<script type="text/javascript">  
$(function () {  
    $('#hc_container').highcharts({  
        chart: {  
            type: 'column'  
        },  
        title: {  
            text: 'Monthly Average Rainfall'  
        },  
        subtitle: {  
            text: 'Source: WorldClimate.com'  
        },  
        xAxis: {  
            categories: [  
                'Jan',  
                'Feb',  
                'Mar',  
                'Apr',  
                'May',  
                'Jun',  
                'Jul',  
                'Aug',  
                'Sep',  
                'Oct',  
                'Nov',  
                'Dec'  
            ],  
            crosshair: true  
        },  
        yAxis: {  
            min: 0,  
            title: {  
                text: 'Rainfall (mm)'  
            }  
        },  
        tooltip: {  
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',  
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +  
                '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',  
            footerFormat: '</table>',  
            shared: true,  
            useHTML: true  
        },  
        plotOptions: {  
            column: {  
                pointPadding: 0.2,  
                borderWidth: 0  
            }  
        },  
        series: [{  
            name: 'Tokyo',  
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]  
  
        }, {  
            name: 'New York',  
            data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]  
  
        }, {  
            name: 'London',  
            data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]  
  
        }, {  
            name: 'Berlin',  
            data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]  
  
        }]  
    });  
});  
</script>  
</body>  
</html>

จะเห็นว่าในส่วนของการกำหนด option ต่างๆ จะมีการกำหนดยาวมาก

วิธีแก้คือ

1. สร้างไฟล์ charts.js และกำหนด option บางส่วนดังนี้

var chartsOption={        
    chart: {
        type: 'column'
    },
    title: {
        text: 'Monthly Average Rainfall'
    },
    subtitle: {
        text: 'Source: WorldClimate.com'
    },
    xAxis: {
        categories: [
            'Jan',
            'Feb',
            'Mar',
            'Apr',
            'May',
            'Jun',
            'Jul',
            'Aug',
            'Sep',
            'Oct',
            'Nov',
            'Dec'
        ],
        crosshair: true
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Rainfall (mm)'
        }
    },
    tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    }
}

2. ที่ไฟล์หลัก กำหนดเป็นดังนี้ highcharts.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Highcharts</title>
</head>
<body>

<div style="width:80%;margin:auto;">

    <div id="hc_container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="js/charts.js"></script>
<script type="text/javascript">
$(function () {
    
    $('#hc_container').highcharts(
        $.extend(chartsOption,{  
        series: [{
            name: 'Tokyo',
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
            }, {
            name: 'New York',
            data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
            }, {
            name: 'London',
            data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
            }, {
            name: 'Berlin',
            data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
        }]            
    }));
        
});
</script>
</body>
</html>

อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ

Tags:: highcharts export กราฟ

URL สำหรับอ้างอิง