无法使用 JSON 数据作为图表输入在 Codeigniter 页面上显示 Morris.JS 图表

Question

我正在使用最新的 Codeigniter 和 MorrisJS。我已经为图表创建了一个视图并通过 JSON 传递动态数据，但这似乎不起作用。我已经确保 MorrisJS 的所有依赖 JS 和 CSS 都映射到视图上。当我将虚拟数据静态地输入图表选项时，它会完美地生成图表。仅在传递 JSON 数据时不起作用。请你指导我，我确信我犯了一个愚蠢的错误，但我无法弄清楚。

我的看法：

<div id="myfirstchart" style="height: 250px;"></div>
    <script>
        Morris.Bar({
            element: 'myfirstchart',
            data: <?php echo $graphData; ?>,
            xkey: 'MonthName',
            ykeys: ['totalTicket'],
            labels: ['Value']
        });
    </script>

我的控制器：

    public function index(){
        $x['graphData']=json_encode($result);
        $this->load->view('common/header');
        $this->load->view('common/main_top_navbar');
        $this->load->view('reports/trends');
        $this->load->view('common/footer',$x);
    }

我的模特：

class Reports_model extends CI_Model{
    function display_monthOnMonth_records(){
        $this->db->select('MONTHNAME(CreatedOn) as MonthName, count(TicketID) as totalTicket');
        $this->db->from('TBL_tickets');
        $this->db->group_by('MonthName');
        $this->db->order_by('
            FIELD(
                MonthName,
                "January",
                "February",
                "March",
                "April",
                "May",
                "June",
                "July",
                "August",
                "September",
                "October",
                "November",
                "December"
            )
            ');
        $query=$this->db->get();
        return $query->result();
    }
}

当我运行这样做时，我在 Chrome Browser/page Inspect(F12) 上看到，该数据显示用于数据输入，但它没有创建图表页.

从浏览器检查结果：

<script>

        Morris.Bar({
            element: 'myfirstchart',
            data: {"data":[{"MonthName":"January","totalTicket":"2500"},{"MonthName":"February","totalTicket":"2200"},{"MonthName":"March","totalTicket":"2350"}]},
            xkey: 'MonthName',
            ykeys: ['totalTicket'],
            labels: ['Value']
        });

</script>

Answer 1

在 index() 方法中，更改：

    $x['graphData']=json_encode($result);

进入：

    $x['graphData']=json_encode($result->data);

根据我从输出中看到的，您有额外的 data 父级。

无法使用 JSON 数据作为图表输入在 Codeigniter 页面上显示 Morris.JS 图表

Unable to display Morris.JS Chart on Codeigniter page using JSON Data as input for Charts

javascript

php

json

codeigniter

morris.js