如何使用Codeigniter中的高图从数据库查询数据?

时间:2019-04-29 18:50:13

标签: php jquery highcharts codeigniter-3

我有全职和兼职员工的数据。然后我使用select_sum得到双方的总数。问题在于如何使用highchart显示按部门分配的全职员工总数和兼职员工总数的数据。

我是新手,不知道如何使其动态。因此,我将尝试在静态数据中使用它。预先感谢。

数据库:

_____________________________________________________________
| id | account_id  |   fulltime   |  partime  |  department  |
|____|_____________|______________|___________|______________|
| 1  |      3      |      1       |   null    |      3       |
|____|_____________|______________|___________|______________|
| 2  |      5      |     null     |     1     |      1       |
|____|_____________|______________|___________|______________|
| 3  |      6      |       1      |    null   |      2       |
|____|_____________|______________|___________|______________|

LEGEND :

department : 1 = 'COF'
           : 2 = 'CAS'
           : 3 = 'CCS'

我使用以下内容:

JS:

$(function(){

    var full= $.getJSON('<?php echo base_url('public/employee/fulltime');?>', 
        function (data1){
            console.log(data1);
    });

    var data = [
     { y: 'COF', z0: 'Part Time' , a0: 275, z1: 'Full Time' , a1: full},
     { y: 'CAS', z0: 'Part Time' , a0: 440, z1: 'Full Time' , a1: 332},
     { y: 'CCS', z0: 'Part Time' , a0: 450, z1: 'Full Time' , a1: 425},
     { y: 'CFND', z0: 'Part Time' , a0: 462, z1: 'Full Time' , a1: 435},
     { y: 'CHMT', z0: 'Part Time' , a0: 504, z1: 'Full Time' , a1: 162},
     { y: 'CTE', z0: 'Part Time' , a0: 400, z1: 'Full Time' , a1: 162},
     { y: 'CBMA', z0: 'Part Time' , a0: 260, z1: 'Full Time' , a1: 79},
     { y: 'CCJE', z0: 'Part Time' , a0: 129, z1: 'Full Time' , a1: 42},
     { y: 'ADMIN', z0: 'Part Time' , a0: 129, z1: 'Full Time' , a1: 42}

    ]

    Morris.Bar({
      element: 'chart',
      data: data,
        xkey: 'y',
        ykeys: ['a0', 'a1'],
        labels: ['Label1', 'Label2'],
        fillOpacity: 0.6,
        hideHover: 'auto',
        behaveLikeLine: true,
        resize: true,
        stacked: true,
        pointFillColors:['#ffffff'],
        pointStrokeColors: ['black'],
        lineColors:['lime', 'blue', 'red', 'cyan', '#909090'],
        xLabelAngle: 60,
        hoverCallback: function (index, options, content, row) {
        var currentDiv = "";
        var finalContent = $("<div/>");

        $(content).each(function () {
            currentDiv = $(this);
            currentDiv.html(currentDiv.html().replace("Label1", data[index].z0).replace("Label2", data[index].z1))
            $(finalContent).append(currentDiv);
        });

        $(finalContent)
        return finalContent;    
      }
    });

});

控制器:

public function fulltime()
{

    $fulltime = $this->account_model->get_fulltime();
        echo json_encode($fulltime);
}

型号:

public function get_fulltime()
{
    $this->db->select_sum('fulltime');
    $this->db->from('list_of_employee');

    return $this->db->get()->result();
}

screenshot

1 个答案:

答案 0 :(得分:0)

将从Ajax响应中获得的数据作为输入数据放入Highcharts脚本中
1-以Highcharts的结构查询数据。
2-在Controller中进行一个PHP操作以调用上一个查询。
3-在Ajax调用中使用PHP Action,并通过Highchats的输入来输入响应数据。