Question

我是chartjs的新手。在花了一些时间检查教程之后，我提出了以下代码，它给了我undefined个x和y轴的结果。我可以设法让静态数据工作，即如果在y-axis放下月份并且图表显示正常。任何帮助是极大的赞赏。顺便说一句，我正在使用chartjs版本2.1.4。

data.php：

<?php
//setting header to json
header('Content-Type: application/json');
include_once 'includes/db_connect.php';

$query = sprintf("SELECT FiscalPeriod, SUM(DollarsSold) AS Sold
                  FROM ar_customersalespersonhistory
                  WHERE FiscalYear = '2017'
                  GROUP BY FiscalPeriod
                  ORDER BY FiscalPeriod
                ");

//execute query
$result = $connection->query($query);

//loop through the returned data
$data = array();
foreach ($result as $row) {
    $data[] = $row;
}

//free memory associated with result
$result->close();

//close connection
$connection->close();

//now print the data
print json_encode($data);

?>

来自data.php的输出：

[{
  "FiscalPeriod": "01",
  "Sold": "357508.03"
}, {
  "FiscalPeriod": "02",
  "Sold": "393790.14"
}, {
  "FiscalPeriod": "03",
  "Sold": "407346.07"
}, {
  "FiscalPeriod": "04",
  "Sold": "557704.12"
}, {
  "FiscalPeriod": "05",
  "Sold": "555916.68"
}, {
  "FiscalPeriod": "06",
  "Sold": "422659.26"
}, {
  "FiscalPeriod": "07",
  "Sold": "297766.49"
}, {
  "FiscalPeriod": "08",
  "Sold": "448256.07"
}, {
  "FiscalPeriod": "09",
  "Sold": "510020.86"
}, {
  "FiscalPeriod": "10",
  "Sold": "325525.30"
}, {
  "FiscalPeriod": "11",
  "Sold": "89214.27"
}]

javascript：

$(document).ready(function() {
  $.ajax({
    url: '/registration/sales_general.php',
    method: 'GET',
    // dataType: 'json',
    success: function(data) {
      // console.log(data);
      var month = [];
      var sold = [];

      for (var i in data) {
        month.push(data[i].FiscalPeriod);
        sold.push(data[i].Sold);
      }

      console.log(month);
      console.log(sold);
      var chartdata = {
        // labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
        labels: month,
        datasets: [{
          label: '2017',
          backgroundColor: '#26B99A',
          // data: [33,24,25,19,46,99,21]
          data: sold
        }]
      };

      var ctx = $('#mybarChart1');
      ctx.height = 70;

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

Answer 1

您的chartdata对象不包含有效的ChartJS选项

这应该有效：

    var data = [{"FiscalPeriod":"01","Sold":"357508.03"},{"FiscalPeriod":"02","Sold":"393790.14"},{"FiscalPeriod":"03","Sold":"407346.07"},{"FiscalPeriod":"04","Sold":"557704.12"},{"FiscalPeriod":"05","Sold":"555916.68"},{"FiscalPeriod":"06","Sold":"422659.26"},{"FiscalPeriod":"07","Sold":"297766.49"},{"FiscalPeriod":"08","Sold":"448256.07"},{"FiscalPeriod":"09","Sold":"510020.86"},{"FiscalPeriod":"10","Sold":"325525.30"},{"FiscalPeriod":"11","Sold":"89214.27"}];
    var month = [];
    var sold = [];

    for (var i in data) {
      month.push(data[i].FiscalPeriod);
      sold.push(data[i].Sold);
    }

    var chartdata = {
      type: 'line',
      data: {
        labels: month,
        datasets: [
          {
            label: '2017',
            data: sold,
            backgroundColor: '#26B99A',
          }
        ]
      },
    }
    var ctx = document.getElementById('chartJSContainer').getContext('2d');
    new Chart(ctx, chartdata);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>

Chartjs动态图表返回x＆amp; y轴未定义

1 个答案:

这应该有效：