Question

尝试让morris.js与codeigniter一起工作但由于某些原因没有在图表上显示我在控制器函数上生成数据balance()

我的json out put编码为["[{y: '2018-03-08' , a: 82.36}],"]

问题如何确保图表数据显示正确

public function balance() {
    $json = array();

    $results = $this->getPlaceWins();

    foreach ($results as $value) {
        $json[] = "[{y: " . "'" . $value['date'] . "'" . " , a: " . $this->getSumTotalPlace($value['date']) . "}],";
    }

    echo json_encode($json);
}

public function getPlaceWins() {
    $this->db->select('*');
    $this->db->from('betting');
    $this->db->group_by('date');
    $this->db->where('uid', $this->session->userdata('uid'));
    $balance_query = $this->db->get();

    return $balance_query->result_array();
}

public function getSumTotalPlace($date) {
    $this->db->select_sum('place');
    $this->db->from('betting');
    $this->db->where('uid', $this->session->userdata('uid'));
    $this->db->where('date', $date);
    $balance_query = $this->db->get();

    return $balance_query->row('place');
}

查看

<div class="container">
    <div class="row">
        <div class="col-xl-7 col-lg-7 col-md-7 col-sm-12 col-xs-12 mb-3 mt-3">
            <div id="bar-chart"></div>
        </div>
    </div>
</div>

<script type="text/javascript">

$.ajax({
    type: 'get',
    url: "<?php echo base_url('welcome/balance');?>",
    dataType: 'json',
    success: function(json) {

        alert(json);

        Morris.Bar({
            element: 'bar-chart',
            data: json,
            xkey: 'y',
            ykeys: ['a'],
            labels: ['Place Wins'],
            gridTextSize: 12,
            resize: true,
            barColors: ["#0b62a4"],
        });
    },
});
</script>

更新

我也尝试过这种方式，但仍然没有在图表上显示。我收到的数据很好

<script type="text/javascript">
$( document ).ready(function() {

    $(function() {

        var jsonData = $.getJSON("<?php echo base_url('welcome/balance');?>", function (jsonData) {
            console.log(jsonData); 

            Morris.Bar({
                element: 'bar-chart',
                data: jsonData,
                xkey: 'Y',
                ykeys: ['a'],
                labels: ['Wins'],
                hideHover: 'auto',
                resize: true
            });

        });
    });
});

Answer 1

我开始工作了我在控制器中更改了一些内容并查看

首先在视图中使用

Set<ConstraintViolation<Object>> errors = validator.validate(parameterMap);

然后在控制器上我现在使用数组（内容）等

$( document ).ready(function() {

    $(function() {

        var jsonData = $.getJSON("<?php echo base_url('welcome/balance');?>", function (jsonData) {
            console.log(jsonData); 

            Morris.Bar({
                element: 'bar-chart',
                data: jsonData,
                xkey: 'y',
                ykeys: ['a'],
                labels: ['Wins'],
                hideHover: 'auto',
                resize: true
            });

        });
    });
});

现在正常工作

Morign.js，codeigniter不显示数据

更新

1 个答案: