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

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

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

ภาพประจำตัวสมาชิก
Patipat
PHP Super Member
PHP Super Member
โพสต์: 400
ลงทะเบียนเมื่อ: 10/06/2019 10:12 am

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

โพสต์โดย 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) เปิดดู 63 ครั้ง




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

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

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) เปิดดู 63 ครั้ง

โค๊ดทั้งหมด

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

<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
ตัวอย่างในการใส่โค้ด

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

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



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

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

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 16 และ บุคคลทั่วไป 0 ท่าน