将 json_encode 传递给 chart.js 将不起作用答案

【问题标题】：Passing json_encode to chart.js won't work将 json_encode 传递给 chart.js 将不起作用
【发布时间】：2016-11-11 03:50:11
【问题描述】：

我正在尝试使用 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
        }
    });
});

我认为数组格式是正确的，只是键周围有引号，并且数据集上没有方括号。

图表未构建，我收到此错误：

未捕获的类型错误：无法读取未定义的属性“长度”

可以做什么？

【问题讨论】：

hoverBackgroundColor 不是强制性的
键上的引号无关紧要。数据集上没有方括号意味着您的 datasets 是一个对象，而不是您可能期望的对象数组。这意味着您没有按照您想要/需要的方式构建数据。 JSON 不是你的问题。
如何将数据集输出为对象？
您正在将它们作为一个对象输出。如果您希望改为使用“方括号”，则需要改为构造一个数组。你对你的datasets 有什么期望？
啊，抱歉，您的一个块显示了预期的数据...

标签： javascript php json chart.js

【解决方案1】：

$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];
                                ^^^

【讨论】：