如何利用Controller返回的JSON数据实现Chart.js多饼图展示

看起来你已经搞定了硬编码数据的图表展示，现在要换成后端接口的JSON数据，核心就是把后端返回的结构转换成Chart.js需要的数据集格式，然后逐个初始化图表就行。我给你一步步拆解解决方案：

第一步：准备页面上的Canvas容器 #

因为你有3组数据，所以需要对应3个Canvas元素，确保每个都有唯一ID：

<canvas id="surveyChart1" width="400" height="200"></canvas>
<canvas id="surveyChart2" width="400" height="200"></canvas>
<canvas id="surveyChart3" width="400" height="200"></canvas>

第二步：获取后端数据并适配Chart.js格式 #

用原生fetch（或者你习惯的axios）拉取数据，然后把每个JSON对象转换成Chart.js能识别的数据集。假设你的Controller接口地址是/api/get-survey-data：

// 先定义图表的通用配置（比如类型、刻度、图例，和你硬编码的保持一致）
const baseChartConfig = {
  type: 'bar', // 换成你实际用的图表类型，比如pie/line
  options: {
    responsive: true,
    scales: {
      y: {
        beginAtZero: true,
        title: {
          display: true,
          text: '投票数量'
        }
      }
    }
  }
};

// 定义x轴的固定标签，对应你的三个统计字段
const optionLabels = ['同意', '部分同意', '不同意'];

// 确保DOM加载完成后再执行代码，避免找不到Canvas元素
document.addEventListener('DOMContentLoaded', () => {
  // 拉取后端数据
  fetch('/api/get-survey-data')
    .then(res => {
      if (!res.ok) throw new Error('接口请求失败，请检查地址');
      return res.json();
    })
    .then(rawData => {
      // 遍历每一组数据，生成对应图表
      rawData.forEach((dataItem, index) => {
        // 把单个JSON对象转换成Chart.js需要的数据集
        const chartDataset = {
          label: `第${index+1}组调查结果`,
          data: [
            dataItem.countAgree,
            dataItem.countSomewhatAgree,
            dataItem.countDisagree
          ],
          backgroundColor: ['#27ae60', '#f39c12', '#e74c3c'], // 对应三个选项的颜色
          borderWidth: 1
        };

        // 获取当前组对应的Canvas元素
        const targetCanvas = document.getElementById(`surveyChart${index+1}`);
        if (!targetCanvas) return;

        // 初始化图表
        new Chart(targetCanvas, {
          ...baseChartConfig,
          data: {
            labels: optionLabels,
            datasets: [chartDataset]
          }
        });
      });
    })
    .catch(err => {
      console.error('数据处理出错:', err);
    });
});

第三步：排查你可能遇到的问题 #

如果你之前尝试失败，大概率是这几个原因：

• DOM加载顺序问题：如果JS代码在Canvas元素之前加载，会找不到DOM节点，所以一定要把代码放在DOMContentLoaded事件里，或者放在页面底部。
• 数据顺序不匹配：确保你把countAgree、countSomewhatAgree、countDisagree的顺序和x轴标签的顺序完全对应，不然图表数据会错位。
• Chart.js版本差异：如果你用的是v3+版本，配置结构和v2有区别（比如scales的写法），可以对照官方文档调整baseChartConfig里的配置。
• 接口跨域问题：如果前端和后端域名不同，需要在后端配置CORS允许跨域请求。

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