我正在尝试使用图表创建饼图.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>
根据文档,这是您创建图表的方式:
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
}
});
});
我相信数组格式是正确的,除了键周围有引号,并且数据集上没有方括号。
图表未构建,我收到此错误:
未捕获的类型错误:无法读取未定义的属性"长度"
能做什么?
$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];
^^^