如何在一个JS文件为提交文本赋整数值并在另一JS文件分析页可视化

现有代码错误说明 #

你写的漏洞存储代码存在逻辑错误：&& 运算符在左侧对象为真值时，会直接返回右侧的 +1，因此你定义的 issue 变量最终存储的是数字1，漏洞的所有结构化数据（严重程度、状态等）全部丢失，自然无法完成后续统计，柱状图拿不到合法数字数组就会渲染异常。

具体实现步骤 #

• 第一步：修正漏洞数据存储逻辑，单独维护全局漏洞列表数组，每次用户提交新漏洞时直接存入数组即可，数组天然自带长度属性可直接取总提交量，也可灵活做分类统计：

// 全局存储所有漏洞报告的数组
const allIssues = []
// 提交漏洞时调用的新增逻辑
function addIssue(issueId, issueDesc, issueSeverity, issueAssignedTo, issueStatus) {
  const newIssue = {
    id: issueId,
    description: issueDesc,
    severity: issueSeverity,
    assignedTo: issueAssignedTo,
    status: issueStatus
  }
  allIssues.push(newIssue)
  // 新增完成后可主动触发图表重绘
  renderBarChart()
}

• 第二步：适配柱状图数据源生成逻辑，根据你的展示需求从数组中统计对应数值，生成纯数字数组即可适配你现有可正常运行的柱状图渲染逻辑：

// 示例1：仅统计漏洞总提交量
function getTotalCount() {
  return allIssues.length
}

// 示例2：按严重程度统计低危、中危、高危漏洞数量，生成长度为3的数字数组用于分类柱状图
function getSeverityChartData() {
  let low = 0, mid = 0, high = 0
  allIssues.forEach(issue => {
    if(issue.severity === '低危') low++
    else if(issue.severity === '中危') mid++
    else if(issue.severity === '高危') high++
  })
  return [low, mid, high]
}

• 第三步：对接现有柱状图渲染逻辑，把原来写死的 intVal 替换为上面统计方法返回的数值，每次新增漏洞后重新调用渲染方法更新图表即可。

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