在chart.js中显示未定义的数据,但在inspect元素中显示数组

时间:2019-04-08 09:34:23

标签: php mysql codeigniter graph chart.js

我正试图显示每年3月财政年度的总蒙蒂销售额。我正在为此使用chart.js和codeigniter。

我已经尝试在phpmyadmin中查询,并在那里给我列, 控制台日志中显示相同的数组,但是当我运行chartjs时。它告诉我未定义。我也写过查询以显示过去几年的数据,但它给了我2015年的一栏,不知道它的来历。

<< >>添加了编辑- 我尝试了Google图表,莫里斯图表,highcharts,charts.js,jpgraph和其他一些图表。它没有显示条形图:((请帮助我..如何知道它出了什么问题..?

我的模特-

function getRetailYtd() 
    {
    $query = $this->db->query("select
    DATE_FORMAT(created_on, '%b-%Y') AS month,
         SUM(total_amount) as total 
    FROM
        orders 
    WHERE
        dispatched_on >= CONCAT(YEAR(NOW()), '-04-01') - INTERVAL 1 YEAR
        AND dispatched_on  < CONCAT(YEAR(NOW()), '-04-01')
    GROUP BY
        DATE_FORMAT(created_on, '%m-%Y') 
    ORDER BY
        DATE_FORMAT(created_on, '%Y-%m') DESC");
        return $query->result_array();
    }

我的控制器-

function retail_ytd_data(){
  $this->load->model('dashboard_model','dm');
  $data  = $this->dm->getRetailYtd();
  $this->load->view('retail_ytd');
  print_r(json_encode($data, true));

  }

我的观点-

<div id="chart-container">
  <canvas id="mycanvas"></canvas>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>
<script src='<?php echo base_url();?>assets/global/scripts/app.js'></script>

App.js-

     $(document).ready(function(){
  $.ajax({
    url: "http://localhost/project5/flow/retail_ytd_data",
    method: "GET",
    success: function(data) {
      console.log(data);
      var month = [];
      var total = [];

     for(var i in data) {
        month.push("month " + data[i].month);
        total.push(data[i].total);
      }

      var chartdata = {
        labels: month,
        datasets : [
          {
            label: 'month total',
            backgroundColor: 'rgba(200, 200, 200, 0.75)',
            borderColor: 'rgba(200, 200, 200, 0.75)',
            hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
            hoverBorderColor: 'rgba(200, 200, 200, 1)',
            data: total
          }
        ]
      };

      var ctx = $("#mycanvas");

      var barGraph = new Chart(ctx, {
        type: 'bar',
        data: chartdata
      });
    },
    error: function(data) {
      console.log(data);
    }
  });
});

检查网络中显示的元素->

[{"month":"Mar-2019","total":"2127.40"},{"month":"Feb-2019","total":"7906.00"},{"month":"Jan-2019","total":"586.89"},{"month":"Dec-2018","total":"7200.10"},{"month":"Apr-2018","total":"16234.39"},{"month":"Mar-2018","total":"13174.33"},{"month":"Dec-2015","total":"0.00"}]

0 个答案:

没有答案