Cách sử dụng Chart js với cơ sở dữ liệu MySQL

ngày - 10 tháng 12 , 11 tháng 12, 12 tháng 12, 13 tháng 12, 14 tháng 12, 15 tháng 12, 16 tháng 12, 17 tháng 12, 18 tháng 12, 19 tháng 12, 20 tháng 12 tham dự - 65, 58, 56, 78, 51, 54, 69,

Tôi đã thực hiện hai truy vấn trích xuất dữ liệu và lưu trữ trong 2 mảng là $data1 và $data2 bằng mã bên dưới

$con = new mysqli($servername, $username, $password, $db);
$myquery1 = "select date from Table_attendance";
 $query1 = mysqli_query($con, $myquery1);
 
  if ( ! $query1 ) {
    echo mysqli_error();
    die;
  }
  
  for ($x = 0; $x < mysqli_num_rows($query1); $x++) {
  $data1[] = mysqli_fetch_assoc($query1);
}


 $my1 = "select attendance from Table_attendance";
 $qu1 = mysqli_query($con, $my1);
 
  if ( ! $qu1 ) {
    echo mysqli_error();
    die;
  }
  
  for ($x = 0; $x < mysqli_num_rows($qu1); $x++) {
  $data2[] = mysqli_fetch_assoc($qu1);
}

Sau đó, tôi đã mã hóa hai mảng $data1 và $data2 thành định dạng json bằng đoạn mã sau

$encod = json_encode($data1);
$encod2 = json_encode($data2);

Đầu ra của các mảng như sau

[{"ngày". "2021-12- 10"},{"date". "2021-12-11"},{"date". "2021-12-12"},{"date". "2021-12-13"},{"date". "2021-12-14"},{"date". "2021-12-15"},{"date". "2021-12-16"},{"date". "2021-12-17"},{"date". "2021-12-18"},{"date". "2021-12-19"},{"date". "2021-12-20"}]

[{"sự tham dự ". "65"},{"điểm danh ". " 58 "},{"điểm danh". " 56"},{"điểm danh". " 78 "},{"điểm danh". " 51 "},{"điểm danh". " 54"}{"điểm danh ". "69 "},{"điểm danh ". "35"},{"điểm danh". "68"},{"điểm danh". "43"},{"điểm danh ". "52"}]

Cuối cùng, tôi đã thử chuyển các giá trị được mã hóa như sau để vẽ thành biểu đồ đường nhưng nó không hoạt động

Xin hãy giúp tôi với đánh giá này. Nếu có một mã khác tốt hơn mã của tôi, vui lòng chia sẻ

Chart JS là một khung rất toàn diện để tạo và tùy chỉnh nhiều biểu đồ và đồ thị. Tính dễ sử dụng và khả năng định cấu hình biểu đồ khiến Chart JS trở thành lựa chọn tốt cho biểu đồ HTML5

Một phương pháp khác (24 tháng 3 năm 2021)

Để Chart JS hoạt động với PHP và MySQL không khó và cũng không khó. Đây là cách nó được thực hiện

Lập biểu đồ thanh

Giả sử tôi có một bảng cơ sở dữ liệu có cột int (giá trị) và cột ngày giờ (date_time). Tôi sẽ tạo biểu đồ thanh để hiển thị các giá trị này cùng với ngày trong biểu đồ thanh

create_data.php

prepare("SELECT `value`, `date_time` FROM `data` ORDER BY `date_time`;");
$select->execute();
$data = array();
while ($row = $select->fetch(PDO::FETCH_ASSOC)) {
    $data[] = $row;
}
print json_encode($data);

Điều này sẽ chỉ in ra dữ liệu dưới dạng một mảng. Đây là những gì Chart JS sử dụng để vẽ các điểm

view_chart.html

value_chart.js

$(document).ready(function () {
    $.ajax({
        url: "create_data.php",
        type: "GET",
        success: function (data) {
            var date_time = [];
            var value = [];
            for (var i in data) {
                date_time.push("" + data[i].date_time);
                value.push(data[i].value);
            }

            var chartdata = {
                labels: date_time,
                datasets: [
                    {
                        label: "value",
                        fill: false,
                        lineTension: 0.3,
                        backgroundColor: chartColors.green,
                        borderColor: chartColors.green,
                        pointHoverBackgroundColor: chartColors.green,
                        pointHoverBorderColor: chartColors.green,
                        hoverBackgroundColor: chartColors.gold,
                        data: value,
                        yAxisID: "y-axis-1"
                    }
                ]
            };

            var ctx = $("#value-data");

            var LineGraph = new Chart(ctx, {
                type: 'bar',
                data: chartdata,
                options: {
                    title: {
                        display: true,
                        text: '',
                        maintainAspectRatio: false,
                        fontColor: chartColors.green
                    },
                    responsive: true,
                    scales: {
                        xAxes: [{
                            display: true,
                            scaleLabel: {
                                display: true,
                                labelString: ''
                            }
                        }],
                        yAxes: [{
                            type: "linear",
                            display: true,
                            position: "left",
                            id: "y-axis-1",
                            scaleLabel: {
                                display: false,
                                labelString: 'value'
                            }
                        }]
                    }
                }
            });
        },
        error: function (data) {

        }
    });
});
window.chartColors = {
    red: 'rgb(255, 99, 132)',
    orange: 'rgb(255, 159, 64)',
    yellow: 'rgb(255, 205, 86)',
    green: 'rgb(75, 192, 192)',
    blue: 'rgb(54, 162, 235)',
    purple: 'rgb(153, 102, 255)',
    gold: 'rgb(248,193,28)',
    grey: 'rgb(201, 203, 207)'
};

Có vẻ khó hiểu phải không? . Bạn có thể thấy rằng tôi đang theo dõi các cột giá trị và date_time, đây rõ ràng cũng là các điểm trên trục

Các màu được xác định ở cuối, điều này là để tiết kiệm việc lặp lại mã hex và để tạo khả năng đọc. Đây là một ví dụ

Làm cho tài nguyên thân thiện

Một vấn đề với mã hiện tại này là sự thiếu bền vững trong việc sử dụng tài nguyên. Mỗi khi ai đó truy cập trang biểu đồ của bạn, cơ sở dữ liệu sẽ được truy vấn. Bạn có thể không nhận được 100 lượt xem mỗi phút cho trang biểu đồ của mình nhưng điều đó không có nghĩa là bạn có thể viết mã có cách thực hành kém

Điều này thậm chí còn phụ thuộc nhiều hơn khi bạn bắt đầu lọc, tìm nạp thêm dữ liệu trên mỗi hàng (nhiều thanh) và định dạng ngày giờ được trả về

Tránh điều này rất đơn giản, thay vì create_data.php trả lại mảng bạn lấy nó để tạo một tệp JSON chứa dữ liệu trong đó

Điều này được thực hiện như

prepare("SELECT `value`, `date_time` FROM `data` ORDER BY `date_time`;");
$select->execute();
$data = array();
while ($row = $select->fetch(PDO::FETCH_ASSOC)) {
    $data[] = $row;
}
$fp = fopen('value_data.json', 'w');
fwrite($fp, json_encode($data));
fclose($fp);

Chỉ cần trỏ một công việc định kỳ để gọi create_data.php do đó cập nhật tệp JSON (value_chart. json)

Trong value_chart.js thay đổi

url: "create_data.php",

ĐẾN

Bây giờ khi trang biểu đồ của bạn được xem thay vì cơ sở dữ liệu được truy vấn mỗi lần, tệp JSON sẽ được tải. Chỉ cần nhớ cron create_data.php cứ sau 2 hoặc 5 phút, v.v.

Làm cách nào để lấy dữ liệu từ MySQL trong biểu đồ js?

Làm cách nào để kết nối biểu đồ js với cơ sở dữ liệu?

Làm cách nào để tạo biểu đồ từ MySQL?

Làm cách nào để vẽ biểu đồ thanh bằng dữ liệu từ bảng MySQL và PHP?