基于SurveyJS JSON用户响应，为每个新页面生成对应图表

我来帮你搞定这个为SurveyJS每个页面生成独立图表的需求，下面是具体的实现思路、步骤和代码示例：

咱们的目标是把SurveyJS里每个页面的用户响应数据，单独生成对应的图表。核心逻辑很简单：

1. 先拆分SurveyJS的JSON数据，区分不同的页面
2. 针对每个页面里的问题（比如你示例里的评分题），收集对应的用户响应
3. 为每个页面创建独立的图表容器，用图表库（这里选常用的Chart.js）渲染出专属图表

• 步骤1：引入依赖
  先把SurveyJS和Chart.js的库引入到项目里，确保能正常解析问卷数据和生成图表。
• 步骤2：拆分页面数据
  遍历SurveyJS的pages数组，把每个页面的问题和对应的响应数据匹配起来。
• 步骤3：创建独立图表容器
  为每个页面生成一个专属的DOM容器，用来放对应的图表。
• 步骤4：渲染页面专属图表
  针对每个页面的问题类型（比如评分题用柱状图），用Chart.js渲染出独立的图表。

HTML部分 #

<!-- 图表容器，每个页面的图表会放在这里 -->
<div id="chart-container"></div>

<!-- 引入依赖库 -->
<script src="https://cdn.jsdelivr.net/npm/survey-javascript@1.9.129/survey.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>

JavaScript部分 #

// 你的SurveyJS问卷JSON数据
var surveyJSON = {
  pages: [
    {
      name: "page1",
      elements: [
        { type: "rating", name: "您开展市场分析的信心如何？", description: "5 - 信心最高" },
        { type: "rating", name: "您评估新机会可行性的信心如何？", description: "5 - 信心最高" },
        { type: "rating", name: "您发掘现有产品改进新方法的信心如何？", description: "5 - 信心最高" }
      ]
    },
    {
      name: "page2",
      elements: [
        { type: "rating", name: "您制定营销策略的信心如何？", description: "5 - 信心最高" },
        { type: "rating", name: "您执行营销计划的信心如何？", description: "5 - 信心最高" }
      ]
    }
  ]
};

// 模拟用户响应数据（实际项目中替换为真实的用户提交数据）
const sampleResponses = {
  page1: {
    "您开展市场分析的信心如何？": 4,
    "您评估新机会可行性的信心如何？": 3,
    "您发掘现有产品改进新方法的信心如何？": 5
  },
  page2: {
    "您制定营销策略的信心如何？": 4,
    "您执行营销计划的信心如何？": 2
  }
};

// 生成每个页面的独立图表
function renderPageCharts() {
  const container = document.getElementById("chart-container");
  
  surveyJSON.pages.forEach(page => {
    // 创建页面标题和图表容器
    const pageSection = document.createElement("div");
    pageSection.className = "page-chart-section";
    pageSection.innerHTML = `<h3>${page.name} - 响应数据图表</h3><canvas id="chart-${page.name}"></canvas>`;
    container.appendChild(pageSection);

    // 收集当前页面的问题和响应数据
    const labels = [];
    const dataValues = [];
    page.elements.forEach(element => {
      if (element.type === "rating") {
        labels.push(element.name);
        dataValues.push(sampleResponses[page.name][element.name] || 0);
      }
    });

    // 用Chart.js渲染独立图表
    const ctx = document.getElementById(`chart-${page.name}`).getContext("2d");
    new Chart(ctx, {
      type: "bar",
      data: {
        labels: labels,
        datasets: [{
          label: "用户评分（1-5分）",
          data: dataValues,
          backgroundColor: "rgba(54, 162, 235, 0.6)",
          borderColor: "rgba(54, 162, 235, 1)",
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true,
            max: 5,
            ticks: { stepSize: 1 }
          }
        }
      }
    });
  });
}

// 页面加载完成后生成图表
window.onload = renderPageCharts;

• 独立容器：每个页面的图表都有自己的canvas容器，通过页面的name属性来区分，避免冲突。
• 扩展性：如果你的问卷里有其他类型的问题（比如单选、多选），只需要修改element.type的判断逻辑，换成对应的图表类型（比如饼图、折线图）即可。
• 真实数据替换：把示例里的sampleResponses换成实际的SurveyJS用户提交数据（可以通过SurveyJS的survey.data获取）。

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