无法将数组隐式转换为字符串：控制器向Chart.js传值求助

问题根源 #

你遇到的错误是因为后端传递的JSON字符串在前端被当作普通字符串处理，而非JavaScript对象。当前代码中，控制器将数组转为JSON字符串后传给视图，但视图直接插入JS代码时，没有正确将其解析为JS可识别的对象格式，导致类型转换错误。

解决方法 #

方法一：前端解析JSON字符串 #

修改main.php中的JS代码，明确将JSON字符串解析为JS对象：

<?php
$this->registerJs(<<<JS
        // 解析JSON字符串为JavaScript对象
        var data = JSON.parse('{$data}');
        var kpiScores = [data.Q1, data.Q2, data.Q3, data.Q4];

        // 以下图表代码保持不变
        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['1st Quarter', '2nd Quarter', '3rd Quarter', '4th Quarter'],
                datasets: [{
                    label: 'Performance Score',
                    data: kpiScores,
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true,
                        max: 100
                    }
                }
            }
        });
JS
);
?>

注意：如果数据中包含单引号，需在控制器中对JSON字符串做转义，或改用双引号包裹解析：

// 控制器中保持JSON编码不变
return $this->render('index', ['data' => json_encode($data)]);
// 前端修改为
var data = JSON.parse("{$data}");

方法二：后端传原始数组，前端直接生成JS对象 #

这种方式更安全，能自动处理转义问题，避免语法错误和XSS风险：

1. 修改ChartController.php，传递原始数组而非JSON字符串：

class ChartController extends \yii\web\Controller
{
    public function actionIndex()
    {
        $commonKpiTotalScoreQ1 = $this->getQuartPerformanceData(1);
        $commonKpiTotalScoreQ2 = $this->getQuartPerformanceData(2);
        $commonKpiTotalScoreQ3 = $this->getQuartPerformanceData(3);
        $commonKpiTotalScoreQ4 = $this->getQuartPerformanceData(4);

        $data = [
            'Q1' => $commonKpiTotalScoreQ1,
            'Q2' => $commonKpiTotalScoreQ2,
            'Q3' => $commonKpiTotalScoreQ3,
            'Q4' => $commonKpiTotalScoreQ4,
        ];

        // 传递原始数组
        return $this->render('index', ['data' => $data]);
    }
}

2. 修改main.php，用Yii自带的jsonEncode方法直接生成JS对象：

<?php
$this->registerJs(<<<JS
        // 将PHP数组转为JavaScript对象
        var data = {$this->jsonEncode($data)};
        var kpiScores = [data.Q1, data.Q2, data.Q3, data.Q4];

        // 以下图表代码保持不变
        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['1st Quarter', '2nd Quarter', '3rd Quarter', '4th Quarter'],
                datasets: [{
                    label: 'Performance Score',
                    data: kpiScores,
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true,
                        max: 100
                    }
                }
            }
        });
JS
);
?>

验证 #

修改完成后，JS变量data会被正确解析为对象，kpiScores能获取到各季度的分数数据，柱状图即可正常渲染。

内容的提问来源于stack exchange，提问作者Najmuddin Roshenry