Chart.js传入EJS数组后标签与数据被拆分为单个字符显示问题求助

• EJS 中<%= %>标签的输出特性：该标签会对输出内容做HTML转义处理，且会自动将数组类型转为逗号拼接的普通字符串，比如[11.2, 13.5, 14.7]会被转为"11.2,13.5,14.7"的字符串格式，你额外添加的反引号进一步将其固化为字符串类型。Chart.js 接收字符串格式的labels和data参数时，会将每个字符拆分为独立的条目处理，因此出现异常。
• 配置层级错误：你代码中的options配置被错误放置在datasets的对象内部，正确的层级应该和type、data平级，该问题会导致图表的全局配置不生效。

无需修改Express路由代码，仅调整EJS模板中的输出方式和配置层级即可：

1. 用<%- %>标签配合JSON.stringify()输出数组：<%- %>会输出未转义的原始内容，JSON.stringify()会将后端传入的数组直接转为JS可识别的数组字面量，不需要额外包裹任何字符串符号。
2. 将options配置移到正确的层级。

修复后的EJS模板代码如下：

<canvas id="myChart" width="400" height="400"></canvas>
<script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: <%- JSON.stringify(base) %>,
            datasets: [{
                label: '# of Votes',
                data: <%- JSON.stringify(prices) %>,
                backgroundColor: 'green'
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });
</script>

内容的提问来源于stack exchange，提问作者Facts Theory Story