使用Twig变量为Chart.js设置数据时得到字符串而非数组如何解决

1. 调整Twig端数据构造 #

你之前只提取了项目名，现在要分别构造适配Chart.js的标签数组和数值数组：

{% set project_labels = [] %}
{% set project_sizes = [] %}
{% for project in PROJECTS %}
    {% if project.name and project.size %}
        {% set project_labels = project_labels|merge([project.name]) %}
        {% set project_sizes = project_sizes|merge([project.size * 1]) %}
        {# 乘以1是为了把字符串格式的size转为数字，避免后续Chart.js渲染异常 #}
    {% endif %}
{% endfor %}
{# 如果需要加Remaining项，直接在Twig层合并到数组即可 #}
{% set project_labels = project_labels|merge(['Remaining']) %}
{% set project_sizes = project_sizes|merge([你计算得到的剩余数值]) %}

2. 修正JS变量赋值错误 #

你之前拿到字符串类型是两个原因导致的：

• 给json_encode的结果套了单引号，把原本的数组格式强制转成了字符串
• 没有加raw过滤器，Twig默认会转义JSON里的引号为"，导致格式失效

正确写法如下：

// 不要加单引号，加raw过滤器禁止Twig转义特殊字符
var project_labels = {{ project_labels|json_encode|raw }};
var project_data = {{ project_sizes|json_encode|raw }};
// 此时console.log(typeof project_labels)会输出object，就是正常的数组类型

3. 替换Chart.js配置项 #

把原配置里写死的labels和data替换为上面的变量即可：

var data = {
    labels: project_labels,
    datasets: [
        {
            data: project_data,
            backgroundColor: [
                "#FF6384",
                "#36A2EB",
                "#9FADBD"
                // 如果项目数量较多，对应补充足够的颜色值即可
            ],
            hoverBackgroundColor: [
                "#FF6384",
                "#36A2EB",
                "#9FADBD"
            ]
        }]
};
// 剩余的options、图表初始化逻辑保持你原本的写法即可

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