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

เขียนเมื่อ 7 ปีก่อน โดย Ninenik Narkdee
export chart กราฟ highcharts

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



เทคนิคเนื้อหาส่วนนี้เป็นวิธีการกำหนด 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:: export highcharts chart กราฟ







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












สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Privacy Policy
Author
2023 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ