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

PHP Knowledge เป็น บอร์ดรวามความรู้ php เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

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

User avatar
Patipat
PHP Super Hero Member
PHP Super Hero Member
Posts: 996
Joined: 10/06/2019 10:12 am

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

Postby Patipat » 19/06/2019 3:41 pm

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

ในรูปเป็นกราฟแสดงข้อมูลที่มีแค่ตัวเลข อัตราดอกเบี้ยและเงินต้น ยังไม่มีคำว่าบาท แต่ในข้อมูลตัวเลขนี้ ฟังก์ชันของกราฟ สามารถใส่ได้แค่ตัวเลข ไม่สามารถต่อสตริง ต่อคำได้ ดูการเชื่อมต่อคำ ได้ที่ String ต่อคำ PHP
Selection_942.png
Selection_942.png (20.72 KiB) Viewed 148 times




1. วิธีการเพิ่มคำต่อท้ายลงในกราฟที่มีข้อมูลเป็นตัวเลขในฟังก์ชันของกราฟ
โค้ด นี้แสดง จำนวนเงินอัตราดอกเบี้ยและเงินต้น

Code: Select all

series: [{
        name: 'อัตราดอกเบี้ย',
        data: [<?php echo $vat?>]
    }, {
        name: 'เงินต้น',
        data: [<?php echo $price?>]
    }]


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

Selection_944.png
Selection_944.png (22.85 KiB) Viewed 148 times

โค๊ดทั้งหมด

Code: Select all

<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>


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

Code: Select all

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



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

ถาม - ตอบได้ที่ >> ถามตอบ Programming PHP
If you fall, let you stand. :)

Return to “PHP Knowledge”

Who is online

Users browsing this forum: No registered users and 8 guests