เว็บบอร์ด PHP เว็บส่งเสริมการเรียนรู้ Hosting CRM ERP Server Programming ถาม-ตอบปัญหา

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

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

[size=130]วันนี้จะมาแชร์ความรู้ ผมได้ทำกราฟแสดงการเปรียบเทียบข้อมูลและได้ใช้ PHP [url=https://www.mindphp.com/forums/viewtopic.php?f=78&t=57664]สร้างกราฟ High Chart[/url] จะมีการนำ [url=https://mindphp.com/developer/36-jquery/287-jquery-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html]Jquery[/url] และ ไฟล์ js มาร่วมใช้งานด้วย ผมได้ทำกราฟแบบ Stack Chart จะเป็นกราฟซ้อนกัน แสดงข้อมูลอัตราดอกเบี้ย และ เงินต้น ข้อมูลสองอย่างนี้เป็นข้อมูลตัวเลขและจะใส่คำว่า "บาท" ต่อท้ายของข้อมูลตัวเลข

ในรูปเป็นกราฟแสดงข้อมูลที่มีแค่ตัวเลข อัตราดอกเบี้ยและเงินต้น ยังไม่มีคำว่าบาท แต่ในข้อมูลตัวเลขนี้ ฟังก์ชันของกราฟ สามารถใส่ได้แค่ตัวเลข ไม่สามารถต่อสตริง ต่อคำได้ ดูการเชื่อมต่อคำ ได้ที่ [url=https://www.mindphp.com/forums/viewtopic.php?f=72&t=51570]String ต่อคำ PHP[/url]
[attachment=1]Selection_942.png[/attachment]
[/size]

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

[size=120]ส่วนโค้ดนี้[color=#40BF00] [<?php echo $vat?>][/color] คือ แสดงค่าของอัตราดอกเบี้ยแสดงเป็นตัวเลข ถ้าเราต้องการแสดงคำว่า "บาท" ต่อจากข้อมูลตัวแรก สมมุติว่า ค่า $vat มีค่าเท่ากับ 100000 บาท
ในกราฟจะแสดงเป็น 100000 บาท ดังรูป [/size]
[attachment=0]Selection_944.png[/attachment]
โค๊ดทั้งหมด
[code]<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>[/code]

[size=120][color=#40BF00]ให้เราเติมคำสั่ง [color=#FF0000] format: '{y} บาท'[/color] ใต้ คำสั่ง [color=#FF0040]color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white', ใน dataLabaels[/color] [/size]
ตัวอย่างในการใส่โค้ด
[code]dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
format: '{y} บาท' //แสดงคำว่า บาท ในข้อมูล
}[/code]


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

ถาม - ตอบได้ที่ >> [url=https://www.mindphp.com/forums/viewforum.php?f=6]ถามตอบ Programming PHP[/url]