如何在FreeMarker中调用JS函数为ChartJS 2.9.3配置backgroundColor属性

你遇到的问题本质是执行时机混淆：FreeMarker是服务端运行的模板引擎，你定义的randomColor是客户端浏览器执行的JavaScript函数。服务端渲染模板时会优先解析<#list>等FreeMarker标签，此时还没到客户端运行JS的阶段，服务端识别不到JS定义的randomColor函数，自然无法返回正确结果。此外你原来的写法遍历后会多一个尾部逗号，也会导致JSON结构语法错误。

方案1：服务端生成颜色（推荐） #

直接在FreeMarker层实现颜色生成逻辑，不需要依赖客户端JS，生成的配置可以直接给ChartJS使用：

<#-- 先在FreeMarker中定义随机颜色生成函数 -->
<#function randomColor>
    <#assign hue = 360?random>
    <#return "hsla(${hue}, 70%, 70%, .8)">
</#function>

<#-- 遍历生成backgroundColor数组，注意处理尾部逗号 -->
"backgroundColor": [
    <#list object.array as item>
        "${randomColor()}"<#if item_has_next>,</#if>
    </#list>
]

方案2：客户端生成颜色 #

如果需要保留JS侧的颜色生成逻辑，可以把数组数据先传到客户端，再在JS初始化Chart时生成颜色：

<script>
// 服务端先把数组数据输出到客户端JS变量
const chartData = [
    <#list object.array as item>
        ${item?json}<#if item_has_next>,</#if>
    </#list>
];

// 客户端JS侧的随机颜色函数
function randomColor(){
    const hue = Math.floor(Math.random() * 360);
    return 'hsla(' + hue + ', 70%, 70%, .8)';
}

// 初始化Chart时生成backgroundColor
const myPieChart = new Chart(document.getElementById('pieChart'), {
    type: 'pie',
    data: {
        datasets: [{
            data: chartData,
            backgroundColor: chartData.map(() => randomColor())
        }]
    }
});
</script>

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