รับเขียนโปรแกรม: สร้างกราฟแท่งด้วย ChartJs.org ตอน 2 ( สร้างกราฟแบบ DataSet เดียว )

จาก Blog สร้างกราฟแท่งด้วย javascript ( โดยใช้ chartjs และดึงข้อมูลมาจาก Firebase database )
ที่แสดงตัวอย่างการจำข้อมูลจาก Firebase มาแสดงเป็นกราฟนั้นอาจดูซับซ้อนเกินไป ในบทความนี้ จะแสดงตัวอย่างการสร้างกราฟที่ง่ายขึ้น ดังนี้

1. เพิ่ม Javascript library chart.js เข้าไปใน source code
<script src="https://www.chartjs.org/dist/2.8.0/Chart.min.js" ></script>
<script src="https://www.chartjs.org/samples/latest/utils.js" ></script>

2. สร้าง tag div สำหรับ ที่จะแสดงเป็นกราฟ

<div id="container" style="width: 100%;">
    <canvas id="canvas"></canvas>
</div>

3. เขียน code javascript สำหรับสร้างกราฟ

<script>

      var color = Chart.helpers.color;

      var barChartData = {

        labels: ["01/08/2562 ","02/08/2562 ","03/08/2562 ","04/08/2562 ","05/08/2562 "],
        //labels คือ ข้อมูลในแกน X
        datasets: [{
            label:"",
            //กำหนดให้ กราฟแท่งเป็นสีแดง
            backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
            borderColor: window.chartColors.red,
            borderWidth: 1,
            data: [1523,1840,1745,1489,1689]
            //data คือ ข้อมูลในแกน Y
        }]

     };

       var ctx = document.getElementById('canvas').getContext('2d');
       //กำหนดให้แสดงกราฟที่ <canvas id="canvas"></canvas>
        window.myBar = new Chart(ctx, {
            type: 'bar',
            data: barChartData,
            options: {
                responsive: true,
                legend: {
                    display: false,
                },
                title: {
                    display: true,
                    text: 'กราแสดงยอดขาย'
                }
            }
        });

</script>

ผลลัพธ์ที่ได้คือ

สามารถดู Source code ได้ตาม link -> https://jsfiddle.net/0mk76cor/

fb_ads

สร้างกราฟแท่งด้วย ChartJs.org ตอน 2 ( สร้างกราฟแบบ DataSet เดียว )