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

Question

我正在使用最新的Codeigniter和MorrisJS。我为图表创建了一个视图，并通过JSON传递了动态数据，但这似乎不起作用。我确保MorrisJS的所有从属JS和CSS都映射在视图上。当我将静态数据静态地提供给Chart选项时，它会完美地生成图表。仅在传递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浏览器/页面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父级。