带有codeigniter的Morris.js不显示数据答案

【问题标题】：Morris.js with codeigniter not displaying data带有codeigniter的Morris.js不显示数据
【发布时间】：2018-03-09 11:26:53
【问题描述】：

试图让 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>

更新

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

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

        });
    });
});

【问题讨论】：

标签： javascript jquery codeigniter morris.js

【解决方案1】：

我得到了它我已经在控制器和视图中更改了一些东西

首先我使用like

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

        });
    });
});

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

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

现在可以正常使用

【讨论】：