如何从WIX Velo向ChartJS雷达图传递多系列数据并渲染？

步骤1：修改后端数据传递代码 #

直接传递完整的SAI对象，一次性发送两个时间点的所有数据：

var SAI={ 
        Initial:[val1,val2,val3,val4,val5,val6], 
        Current:[val1,val2,val3,val4,val5,val6] 
   } 
// 不再仅传递单个系列，直接发送整个SAI对象
$w("#html1").postMessage(SAI);

步骤2：调整HTML中的ChartJS初始化代码 #

初始化时定义好两个数据集，分别对应「初始评估」和「当前评估」，并设置区分样式：

<canvas id="radarChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// 替换为你的6个问题实际标签
const questionLabels = ['问题1', '问题2', '问题3', '问题4', '问题5', '问题6'];

// 初始化带双数据集的雷达图
const ctx = document.getElementById('radarChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'radar',
    data: {
        labels: questionLabels,
        datasets: [
            {
                label: '初始评估',
                data: [],
                backgroundColor: 'rgba(255, 99, 132, 0.2)',
                borderColor: 'rgba(255, 99, 132, 1)',
                borderWidth: 2
            },
            {
                label: '当前评估',
                data: [],
                backgroundColor: 'rgba(54, 162, 235, 0.2)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 2
            }
        ]
    },
    options: {
        scales: {
            r: {
                beginAtZero: true,
                max: 10 // 根据你的分数范围调整，比如满分10分
            }
        }
    }
});
</script>

步骤3：修改消息接收逻辑 #

接收完整的SAI对象，分别给两个数据集赋值并更新图表：

window.onmessage = function(event){
    const receivedData = event.data;
    // 校验数据格式是否符合要求
    if (receivedData && Array.isArray(receivedData.Initial) && Array.isArray(receivedData.Current)) {
        // 给两个数据集分别赋值
        myChart.data.datasets[0].data = receivedData.Initial;
        myChart.data.datasets[1].data = receivedData.Current;
        // 更新图表渲染
        myChart.update();
    }
    else {
        console.log("收到格式错误的数据：");
        console.log(receivedData);
    }
};

关键说明 #

• 无需额外做JSON序列化/解析，postMessage可直接传递符合结构化克隆标准的对象
• 保证数据集顺序与SAI属性对应即可，样式可根据需求自定义调整

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