เติมข้อความต่อจากข้อมูลตัวเลข ในกราฟ High Chart กราฟแบบStack Chart

[Patipat]

วันนี้จะมาแชร์ความรู้ ผมได้ทำกราฟแสดงการเปรียบเทียบข้อมูลและได้ใช้ PHP สร้างกราฟ High Chart จะมีการนำ Jquery และ ไฟล์ js มาร่วมใช้งานด้วย ผมได้ทำกราฟแบบ Stack Chart จะเป็นกราฟซ้อนกัน แสดงข้อมูลอัตราดอกเบี้ย และ เงินต้น ข้อมูลสองอย่างนี้เป็นข้อมูลตัวเลขและจะใส่คำว่า "บาท" ต่อท้ายของข้อมูลตัวเลข

ในรูปเป็นกราฟแสดงข้อมูลที่มีแค่ตัวเลข อัตราดอกเบี้ยและเงินต้น ยังไม่มีคำว่าบาท แต่ในข้อมูลตัวเลขนี้ ฟังก์ชันของกราฟ สามารถใส่ได้แค่ตัวเลข ไม่สามารถต่อสตริง ต่อคำได้ ดูการเชื่อมต่อคำ ได้ที่ String ต่อคำ PHP
[attachment=1]Selection_942.png[/attachment]



1. วิธีการเพิ่มคำต่อท้ายลงในกราฟที่มีข้อมูลเป็นตัวเลขในฟังก์ชันของกราฟ
โค้ด นี้แสดง จำนวนเงินอัตราดอกเบี้ยและเงินต้น
[code]series: [{
name: 'อัตราดอกเบี้ย',
data: [<?php echo $vat?>]
}, {
name: 'เงินต้น',
data: [<?php echo $price?>]
}][/code]

ส่วนโค้ดนี้ [<?php echo $vat?>] คือ แสดงค่าของอัตราดอกเบี้ยแสดงเป็นตัวเลข ถ้าเราต้องการแสดงคำว่า "บาท" ต่อจากข้อมูลตัวแรก สมมุติว่า ค่า $vat มีค่าเท่ากับ 100000 บาท
ในกราฟจะแสดงเป็น 100000 บาท ดังรูป

Selection_944.png (22.85 KiB) Viewed 971 times

โค๊ดทั้งหมด

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

<script>
Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'กราฟแสดงผล เปรียบเทียบอัตราดอกเบี้ยและเงินกู้สินเชื่อบ้าน'
    },
    xAxis: {
        categories: ['เงินทั้งหมด']
    },
    yAxis: {
        min: 0,
        title: {
            text: 'จำนวณเงิน'
        },
        stackLabels: {
            enabled: true,
            style: {
                fontWeight: 'bold',
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
            }
        }
    },
    legend: {
        align: 'right',
        x: -30,
        verticalAlign: 'top',
        y: 25,
        floating: true,
        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
        borderColor: '#CCC',
        borderWidth: 1,
        shadow: false
    },
    tooltip: {
        headerFormat: '<b>{point.x}</b><br/>',
        pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}',
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            dataLabels: {
                enabled: true,
                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                format: '{y} บาท' //แสดงคำว่า บาท ในข้อมูล
            }
        }
    },
    series: [{
        name: 'อัตราดอกเบี้ย',
        data: [<?php echo $vat?>]
    }, {
        name: 'เงินต้น',
        data: [<?php echo $price?>]
    }]

});

</script>

ให้เราเติมคำสั่ง format: '{y} บาท' ใต้ คำสั่ง color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white', ใน dataLabaels
ตัวอย่างในการใส่โค้ด

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

dataLabels: {
                enabled: true,
                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                format: '{y} บาท' //แสดงคำว่า บาท ในข้อมูล
            }

**ในกรณีที่ใช้กราฟแบบผม หรือ ว่าจะนำไปประยุกต์กับกราฟอื่นก็ได้ครับ

ถาม - ตอบได้ที่ >> ถามตอบ Programming PHP