帶有Codeigniter的Morris.js不顯示數據

Question

試圖讓morris.js與codeigniter一起使用，但由於某種原因未在圖表上顯示，我在控制器函數balance()上生成了數據

我的JSON輸出被編碼為["[{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>   

UPDATE

我也嘗試過這種方法，但圖表上仍然沒有任何顯示。 我的數據很好

<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

我可以正常工作了，我在控制器和視圖中做了幾處更改

首先，我用像

$( 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
            });

        });
    });
});

然后在控制器上我現在使用array（content）等

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

    $results = $this->getPlaceWins();

    foreach ($results as $value) {
        $json[] = array('y' => date('Y-m-d', strtotime($value['date'])), 'a' => $this->getSumTotalPlace($value['date']));

        //$json[] = "y: " . "'" . date('Y-m-d', strtotime($value['date'])) . "'" . " , a: " . $this->getSumTotalPlace($value['date']);
    }

    echo json_encode($json);
}

現在工作正常