如何使用CodeIgniter 3实现Donut ChartJS并显示数据库中的数据 [英] How to implement doughnut ChartJS with CodeIgniter 3 and display data from database

问题描述

我一直在尝试使甜甜圈图无法与CI3应用程序一起使用，因为这是我第一次尝试ChartJS.

I've been trying to get doughnut chart to work with my CI3 application to no avail as this is my first time trying ChartJS out.

我尝试过的事情

-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获取图表数据，我缺少什么?我应该设置默认图表数据并在首先获取thojah ajax之后更新它们吗? 非常感谢您的回答.

I'm getting the chart data through ajax on page load, what i'm i missing?, should I set default chart data and update them after fetching thorugh ajax first? Your answer will be highly appreciated, thanks.

推荐答案

经过 ChartJS文档，我在事先用虚拟数据初始化图表后发现并利用了.update(config)方法.这是JavaScript文件现在的样子:

After going through the ChartJS documentation, I found and utilized the .update(config) method after previously initializing my chart with dummy data. Here's what the JavaScript file looks like now:

$(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

Many thanks to @briangottier

这篇关于如何使用CodeIgniter 3实现Donut ChartJS并显示数据库中的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！