Question

所以我开始创建这个chartjs连接数据库我已经使用过这个因为ChartJS当然是一个实时的开源图表..我下载离线jqueryJS和ChartJS它确实有用，所以我知道没有任何问题我的脚本现在当我试图将它连接到数据库时它不会显示一些结果/图表，状态代码是200 OK但是我的属性中没有使用开发人员工具的数据，这是我的代码。请解释为什么它不起作用。谢谢大家的帮助。

我有我的uri，其中monthlyReport查看页面，/ 2是我的Project_No

http://localhost/****/index.php/Main/monthlyReport/2

离线可下载脚本正在处理非数据库查询

<script src="<?php echo base_url('assets/jquery/jquery.min.js')?>"></script>
<script src="<?php echo base_url('assets/js/Chart.js')?>"></script>

按钮和画布，它将触发帖子脚本并查看我的图表

<input type="button" id="btnchart" value="Chart">
<canvas id="myChart" width="400" height="218"></canvas>

要解雇的脚本

    <script type="text/javascript">

            var paramMonth = [];
            var paramPercentage = [];

            $('#btnchart').click(function(){ 
                $.post("<?php echo site_url('Main/chartData'); ?>",
                    function(data) {
                var obj = JSON.parse(data);

                $.each(obj,function(i,item) {
                    paramMonth.push(item.Month);
                    paramPercentage.push(item.Completion_Percentage);
                });


                var ctx = $('#myChart');
                    var myChart = new Chart(ctx, {
                        type: 'horizontalBar',

                        data: {
                            labels: paramMonth,
                            datasets: [{
                                label: paramYear,
                                backgroundColor: 'rgb(3, 0, 102)',
                                borderColor: 'rgb(3, 0, 102)',
                                data: paramPercentage,
                            },{
                                label: paramYear,
                                backgroundColor: 'rgb(255, 0, 0)',
                                borderColor: 'rgb(255, 0, 0)',
                                data: paramPercentage,
                            },{
                                type: 'line',
                                label: "Line Graph",
                                data: paramPercentage,
                            }],
                        },

                        // Configuration options go here
                        options: {}
                    });
                });
            });
</script>

controller获取uri，查询模型并将数据转换为json

public function chartData()
    {
        $data['p_id'] = $this->uri->segment(3);
        $result = $this->foo_pro->getChartData('p_id');
        echo json_encode($result);
    }

查询月度报告Month和Completion_Percentage，其中Project_No = 2

public function getChartData()
{
    $this->db->select('*');
    $this->db->from('monthlyreport');
    $this->db->where('Project_No', $this->uri->segment(3));  
    $query = $this->db->get();
    return $query->result();
}

所以这是我的工作更新..如果没有where子句

$this->db->where('Project_No', $this->uri->segment(3));

当我添加where子句时会发生什么。没有数据显示。

Answer 1

我使用chart.js，我认为我正在做你想要做的事情，即让ajax获取图表数据，然后显示它。您必须以特殊方式更新图表，并希望下面的代码将向您显示您需要执行的操作。我认为这里的关键是在funcs命名空间的顶部，updateMyChart函数。看看：

(function($){
    // Local namespaced variables and functions
    var namespace = {
        myChart: null,
        updateMyChart: function(data){
            funcs.myChart.data.datasets[0].data = data;
            funcs.myChart.update();
        }
    };
    // End local namespaced variables and functions
    window.funcs = ( window.funcs ) 
        ? $.extend( window.funcs, namespace ) 
        : namespace;
})(this.jQuery);

/* Document ready function */
$(document).ready(function(){

    // Initial config
    var myChartConfig = {
        type: 'bar',
        data: {
            labels: ['Yes', 'No', 'Maybe'],
            datasets: [{
                label: 'Current Count',
                backgroundColor: [
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(75, 192, 192, 0.2)'
                ],
                borderColor: [
                    'rgba(75, 192, 192, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(75, 192, 192, 1)'
                ],
                borderWidth: 1,
                data: [0,0,0]
            }]
        },
        options: {}
    };

    var myChartCanvas = $("#myChart");
    funcs.myChart = new Chart(myChartCanvas, myChartConfig);

    /* Unit selector for interest */
    $('#btnchart').on('click', function(){
        $.ajax({
            type: 'post',
            cache: false,
            url: '/someplace/special',
            data: {},
            dataType: 'json',
            success: function(response){
                if(response.data){
                    // In PHP I just json_encode(['data' => [SOME DATA]]);
                    funcs.updateMyChart(response.data);
                }
            },
            error: function(){
                alert('An error prevented chart awesomeness.');
            }
        });
    });

});

我知道我使用的是jQuery而你可能不是，但是更新并没有与jQuery有任何关系。

如何使用codeigniter将数据库数据导入ChartJS

1 个答案: