Question

我目前正在使用codeigniter处理项目。我有一个名为 dashboard.php 的视图页面。在仪表板中，我的任务是显示图表。从 dashbord.php 我调用控制器函数stat()。我使用Morris.js创建了图表，该图表位于 stat.php 。

控制器功能stat（）

  public function stat()
  {
    $this->load->view('template/admin_header', $data);
    $this->load->view('merchant/stat', $data);
    $this->load->view('template/footer', $data);
  }

查看页面stat.php

<script>
$(function() {
     Morris.Area({
        element: 'morris-area-chart-scan-payment',
        data: [
        {
            period: 'Mon',
            spoint: 2666,
            mpayment: null,
        }, 
        {
            period: 'Tue',
            spoint: 2778,
            mpayment: 1350,
        }, 
        {
            period: 'Wed',
            spoint: 4912,
            mpayment: 1969,
        } 
      ], 

      xkey: 'period',
     ykeys: ['spoint', 'mpayment'],
     labels: ['Scan Point', 'Payment'],
     parseTime: false,
     pointSize: 2,
     hideHover: 'auto',
     resize: true
     });
  });
 </script>

 <div id="morris-area-chart-scan-payment"></div>

dashboard.php查看页面

<div id="div1"></div>

我在视图页面 dashboard.php 中创建了一个div标签。如何使用JQuery / Ajax在 dashboard.php 中的 stat.php 中显示图表？

Answer 1

Codeigniter应将array morris数据作为json返回到将在ajax下方请求的网址

$(function() {
  var morris_area = Morris.Area({
    element: 'morris-area-chart-scan-payment',
    data: [
      {
        period: 'Mon',
        spoint: 2666,
        mpayment: null,
      }, 
      {
        period: 'Tue',
        spoint: 2778,
        mpayment: 1350,
      }, 
      {
        period: 'Wed',
        spoint: 4912,
        mpayment: 1969,
      } 
    ], 
    xkey: 'period',
    ykeys: ['spoint', 'mpayment'],
    labels: ['Scan Point', 'Payment'],
    parseTime: false,
    pointSize: 2,
    hideHover: 'auto',
    resize: true
  });

  $('.some-button').on('click', function loadMorrisData() {
    $.ajax({
      url: "http://your-test-url.something",
      success: function(data) {
        morris_area.setData(data);
      }
    });
  });
});

Answer 2

你的回调网址在哪里？

您必须在要发送数据并接收值的位置设置回调网址。

使用Jquery / Ajax在视图中显示codeigniter函数的结果

2 个答案: