我是 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);
}
});
});
最佳答案
您的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>关于javascript - Chartjs 动态图表同时返回 x 和 y 轴未定义，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47358981/