无法使用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()方法内，更改：&nbsp;&nbsp;&nbsp;&nbsp;$x['graphData']=json_encode($result);进入 ：&nbsp;&nbsp;&nbsp;&nbsp;$x['graphData']=json_encode($result->data);从我的输出中可以看到，您有额外的data父级。