我正在尝试使用chart.js(最新版本)创建饼图。
我做了一个数组,我想将其作为图表的数据变量输出。
那是PHP代码:
<?php if($os != null) {
$tiposOs = array('Orçamento'=> "#5DC1E3",
'Aberto'=> "#07D7F7",
'Faturado' => "#07F7CB",
'Em Andamento' => "#FFD724",
'Finalizado' => "#30C70A",
'Cancelado' => "#FF2B2B");
$chartOsData = array();
$chartOsData['type'] = 'pie';
$chartOsData['data'] = array();
$chartOsData['options'] = array('responsive'=>true);
foreach ($os as $o)
{
$chartOsData['data']['labels'][] = $o->status;
$chartOsData['data']['datasets']['data'][] = (int)$o->total;
$chartOsData['data']['datasets']['backgroundColor'][] = $tiposOs[$o->status];
}
?>
这是我的编码值脚本:
<script type="text/javascript">
$(document).ready(function(){
var osChartc = document.getElementById('osChart').getContext('2d');
var osChart = new Chart(osChartc, <?php echo json_encode($chartOsData); ?>);
});
</script>
根据documentation,这是创建图表的方式:
var myDoughnutChart = new Chart(ctx, {
type: 'pie',
data: data,
options: options
});
这是数据变量的输入类型:
var data = {
labels: [
"Red",
"Blue",
"Yellow"
],
datasets: [
{
data: [300, 50, 100],
backgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}]
};
这就是我得到的:
$(document).ready(function() {
var osChartc = document.getElementById('osChart').getContext('2d');
var osChart = new Chart(osChartc,{
"type": "pie",
"data": {
"labels": ["Aberto", "Em Andamento"],
"datasets": {
"data": [1, 1],
"backgroundColor": ["#07D7F7", "#FFD724"]
}
},
"options": {
"responsive": true
}
});
});
我相信数组格式是正确的,除了键周围有引号,并且数据集上没有方括号。
该图表尚未建立,并且出现此错误:
未捕获的TypeError:无法读取未定义的属性“ length”
该怎么办?
最佳答案
$chartOsData['data']['datasets']['data'][] = (int)$o->total;
$chartOsData['data']['datasets']['backgroundColor'][] = $tiposOs[$o->status];
在这里,您将使用键
datasets
和data
将backgroundColor
构造为对象。datasets: [
{
data: [300, 50, 100],
backgroundColor: [...],
}
]
在这里,您显示
datasets
应该是一个包含一个带有这些键的对象的数组。解决方法很简单:将
datasets
设置为数组:$chartOsData['data']['datasets'][0]['data'][] = (int)$o->total;
$chartOsData['data']['datasets'][0]['backgroundColor'][] = $tiposOs[$o->status];
^^^