Question

我一直试图让圆环图与我的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();
    }
}

-JS

$(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后更新它们吗？非常感谢您的回答，谢谢。

Answer 1

在完成ChartJS documentation之后，我在使用虚拟数据初始化我的图表之后找到并使用了.update(config)方法。以下是JavaScript文件的样子：

$(function() {
if ($("#subChart").length) {
    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: [1, 1, 1],
                backgroundColor: ["#85c751", "#6896f9", "#d97b70"],
                hoverBackgroundColor: ["#85c751", "#6896f9", "#d97b70"],
                borderWidth: 0
            }
        ]
    };

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

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

            var obj = JSON.parse(response);
            console.log(obj);
            console.log(obj[0].count);

            var active = obj[0].count;
            var pending = obj[1].count;
            var cancelled = obj[2].count;

            console.log('Initial value:' + subsChart.data.datasets[0].data);
            subsChart.data.datasets[0].data[0] = active;
            subsChart.data.datasets[0].data[1] = pending;
            subsChart.data.datasets[0].data[2] = cancelled;
            subsChart.update(); 

            console.log('Updated value:' + subsChart.data.datasets[0].data);
        }
    })
 }
});

这是输出：

非常感谢@briangottier

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

1 个答案: