我想在wordpress中为chartjs显示每月数据?

问题描述 投票:0回答:0

我使用 WordPress 为用户配置文件构建了一个简单的仪表板。我想在图表上显示每月数据,数据是从自定义表格以及 php 函数中获取的

$query1 = $wpdb->prepare(
        "SELECT DATE_FORMAT(created, '%Y-%m') AS jobdate, COUNT(created) AS jobtotal 
    FROM {$wpdb->prefix}wj_portal_jobs
    WHERE uid = %d
    GROUP BY DATE_FORMAT(created, '%Y-%m')", absint($getCompID)
    );
    $result1 = $wpdb->get_results($query1, OBJECT);

    $data1 = array();
    foreach ($result1 as $row) {
        $nestedData['jobdate'] = $row->jobdate;
        $nestedData['jobtotal'] = $row->jobtotal;
        $data1[] = $nestedData;
    }

    $query2 = $wpdb->prepare(
        "SELECT DATE_FORMAT(a.apply_date, '%Y-%m') AS applydate, COUNT(a.apply_date) AS resumetotal 
        FROM {$wpdb->prefix}wj_portal_jobs AS j 
        LEFT JOIN {$wpdb->prefix}wj_portal_jobapply AS a ON j.id = a.jobid 
        WHERE j.uid = %d 
        GROUP BY DATE_FORMAT(a.apply_date, '%Y-%m')", absint($getCompID)
    );
    $result2 = $wpdb->get_results($query2, OBJECT);

    $data2 = array();
    foreach ($result2 as $row) {
        $nestedData['applydate'] = $row->applydate;
        $nestedData['resumetotal'] = $row->resumetotal;
        $data2[] = $nestedData;
    }

    $current_year = date('Y');
    $response = array(
        'result1' => display_months($data1, $current_year),
        'result2' => display_months($data2, $current_year)
    );

    wp_send_json($response);
function display_months($data, $current_year) {
    $result = array();
    $month_count = 12;

    // Initialize the result array with zero data for all months
    for ($i = 1; $i <= $month_count; $i++) {
        $month = str_pad($i, 2, "0", STR_PAD_LEFT);
        $result[] = array(
            'jobdate' => "$current_year-$month", 
            'jobtotal' => 0, 
            'applydate' => "$current_year-$month", 
            'resumetotal' => 0
        );
    }

    foreach ($data as $item) {
        $month = substr($item['jobdate'], -2);
        $result[$month - 1]['jobtotal'] = $item['jobtotal'];
        
        $month = substr($item['applydate'], -2);
        $result[$month - 1]['resumetotal'] = $item['resumetotal'];
    }
    
    return $result;
}

还有这个脚本图表

$.ajax({
        url: dashboard_ajax_object.ajax_url,
        type: 'POST',
        dataType: 'json',
        data: {
            action: 'get_chart',
            nonce: dashboard_ajax_object.nonce
        },
        success: function(response) {

            console.log(response.result1);

            let result1 = response.result1;
            let result2 = response.result2;
            let jobdates = [];
            let jobtotals = [];
            let applydates = [];
            let resumetotals = [];

            result1.forEach(function(item) {
                let jobdate = item.jobdate
                let jobtotal = item.jobtotal
                jobdates.push(jobdate);
                jobtotals.push(jobtotal);
            });

            result2.forEach(function(item) {
                let applydate = item.applydate
                let resumetotal = item.resumetotal
                applydates.push(applydate);
                resumetotals.push(resumetotal);
            });

            var ctx = document.getElementById('multipleBarsChart').getContext('2d');
            var months = jobdates.map(function(date) {
                return new Date(date).toLocaleString('default', { month: 'short' });
            });
            var chart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: months,
                    datasets: [{
                        label: 'Jobs',
                        data: jobtotals,
                        fill: false,
                        borderColor: 'rgb(29, 199, 234)',
                        tension: 0.1
                    },
                    {
                        label: 'Resume',
                        data: resumetotals,
                        fill: false,
                        borderColor: 'rgb(251, 64, 75)',
                        tension: 0.1
                    }
                    ]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        }
    });

当我访问它时,我得到 500(内部服务器错误),任何人都可以帮助解决这个问题。谢谢你

我想在图表上按照月份显示数据。

wordpress chart.js
© www.soinside.com 2019 - 2024. All rights reserved.