如何使用CodeIgniter 3实现圆环图ChartJS并显示数据库中的数据

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

我一直试图让圆环图与我的CI3应用程序一起工作无济于事,因为这是我第一次尝试使用ChartJS。

我尝试了什么

-PHP

public function get( $data ) {
    if ( $this->input->is_ajax_request() ) {
        $this->load->library('user_utils');

        if ( $data == 'subscriptions' ) {
            $this->load->model('Fetcher', 'fetcher');

            $options = [
               // Database specific key/value pairs
            ];

            $fetch = $this->fetcher->fetch( 'where', $options );

            if ( $fetch ) {
                echo json_encode( $fetch->result_array() ); 

                // needs review
                $fetch->free_result();
            } else {
                print json_encode( 'false' );
            } 
        }
    } else {
        show_404();
    }
}

SS

$(function() {
if ($("#subChart").length) {
    // donut chart data
    jQuery.ajax({
        type: "GET",
        url: 'dashboard/get/subscriptions',
        success: function(response) {
            console.log(response);

            var subscriptions = {
                status : []
            };
            var len = response.length;

            for (var i = 0; i < len; i++) {
                subscriptions.status.push(response[i].subscriptions);
            }
            var chart = $("#subChart");
            var fontFamily = '"Proxima Nova W01", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';

            // set defaults
            Chart.defaults.global.defaultFontFamily = fontFamily;
            Chart.defaults.global.tooltips.titleFontSize = 14;
            Chart.defaults.global.tooltips.titleMarginBottom = 4;
            Chart.defaults.global.tooltips.displayColors = false;
            Chart.defaults.global.tooltips.bodyFontSize = 12;
            Chart.defaults.global.tooltips.xPadding = 10;
            Chart.defaults.global.tooltips.yPadding = 8;
            var data = {
                labels: ["Processed", "Pending", "Cancelled"],
                datasets: [
                    {
                        data: subscriptions.status,
                        backgroundColor: ["#85c751", "#6896f9", "#d97b70"],
                        hoverBackgroundColor: ["#85c751", "#6896f9", "#d97b70"],
                        borderWidth: 0
                    }
                ]
            };

            // -----------------
            // init donut chart
            // -----------------
            new Chart(chart, {
                type: 'doughnut',
                data: data,
                options: {
                    legend: {
                        display: false
                    },
                    animation: {
                        animateScale: true
                    },
                    cutoutPercentage: 80
                }
            });
        }
    })
}
});

我在页面加载时通过ajax获取图表数据,我错过了什么?,我应该设置默认图表数据并在首先获取ajax之后更新它们吗?非常感谢您的回答,谢谢。

php json codeigniter chart.js
1个回答
© www.soinside.com 2019 - 2024. All rights reserved.