JavaScript图表绘制异常求助：列表传参后图表显示错误

错误原因 #

你通过getAttribute获取到的listMonth是字符串类型，而非Chart.js所需的数值数组。虽然控制台输出看起来像数组，但实际上它是一个形如"[129, -69, 226, ...]"的字符串，Chart.js无法将其识别为有效的数据集合，因此图表渲染异常。

修复方案1：将字符串转为数组 #

修改JavaScript代码，通过JSON.parse()把获取到的字符串转为真正的数值数组：

var ctx1 = $("#worldwide-sales").get(0).getContext("2d");
const div1 = document.getElementById('listData');
// 先获取字符串形式的数组
var listMonthStr = div1.getAttribute('listmonth');
// 解析为JS数组
var listMonth = JSON.parse(listMonthStr);
console.log(listMonth); // 现在是真正的数组类型
var myChart1 = new Chart(ctx1, {
    type: "bar",
    data: {
        labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul","Ago","Sep","Oct","Nov","Dec"],
        datasets: [{
                label: "USA",
                data: listMonth,
                backgroundColor: "rgba(0, 156, 255, .7)"
            }
        ]
    },
    options: {
        responsive: true
    }
});

修复方案2：直接渲染为JS变量（更优） #

避免通过DOM属性传递数组，直接在模板中把数据渲染为JavaScript变量，无需额外解析：
在模板中添加：

<script>
// 确保模板引擎渲染出合法的JS数组，使用safe过滤器避免转义
const listMonth = {{ month_profit_list|safe }};
</script>

然后修改JavaScript代码：

var ctx1 = $("#worldwide-sales").get(0).getContext("2d");
var myChart1 = new Chart(ctx1, {
    type: "bar",
    data: {
        labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul","Ago","Sep","Oct","Nov","Dec"],
        datasets: [{
                label: "USA",
                data: listMonth,
                backgroundColor: "rgba(0, 156, 255, .7)"
            }
        ]
    },
    options: {
        responsive: true
    }
});

内容的提问来源于stack exchange，提问作者Agustin Gonzalez Ribas