使用Chart.js生成柱状图的数据遍历与渲染问题求助

原始数据 #

const sampleData = {
   "data1":[
      {
         "ng_fy":"2019/20",
         "js":"[{\"cat_item\": \"Refurbrish NAGRIC & DB Semen Lab\", \"ng_value\": \"10\"}, {\"cat_item\": \"Semen Bulls Purchased\", \"ng_value\": \"7\"}, {\"cat_item\": \"No. Semen doses Procured\", \"ng_value\": \"8\"}, {\"cat_item\": \"No. of Sexed Embryos Procured\", \"ng_value\": \"9\"}, {\"cat_item\": \"Liquid nitrogen semen storage tanks procured\", \"ng_value\": \"11\"}]"
      },
      {
         "ng_fy":"2020/21",
         "js":"[{\"cat_item\": \"Refurbrish NAGRIC & DB Semen Lab\", \"ng_value\": \"5\"}, {\"cat_item\": \"Semen Bulls Purchased\", \"ng_value\": \"15\"}, {\"cat_item\": \"No. Semen doses Procured\", \"ng_value\": \"18\"}, {\"cat_item\": \"No. of Sexed Embryos Procured\", \"ng_value\": \"7\"}, {\"cat_item\": \"Liquid nitrogen semen storage tanks procured\", \"ng_value\": \"1\"}]"
      },
      {
         "ng_fy":"2021/22",
         "js":"[{\"cat_item\": \"Refurbrish NAGRIC & DB Semen Lab\", \"ng_value\": \"10\"}, {\"cat_item\": \"Semen Bulls Purchased\", \"ng_value\": \"13\"}, {\"cat_item\": \"No. Semen doses Procured\", \"ng_value\": \"11\"}, {\"cat_item\": \"No. of Sexed Embryos Procured\", \"ng_value\": \"6\"}, {\"cat_item\": \"Liquid nitrogen semen storage tanks procured\", \"ng_value\": \"14\"}]"
      },
      {
         "ng_fy":"2022/23",
         "js":"[{\"cat_item\": \"Refurbrish NAGRIC & DB Semen Lab\", \"ng_value\": \"25\"}, {\"cat_item\": \"Semen Bulls Purchased\", \"ng_value\": \"19\"}, {\"cat_item\": \"No. Semen doses Procured\", \"ng_value\": \"17\"}, {\"cat_item\": \"No. of Sexed Embryos Procured\", \"ng_value\": \"23\"}, {\"cat_item\": \"Liquid nitrogen semen storage tanks procured\", \"ng_value\": \"16\"}]"
      }
   ]
}

画布元素 #

<canvas id="bar_chart"></canvas>

问题现象 #

遍历数据生成柱状图时，图表渲染的数值信息不正确，且2021/22、2022/23两个财年的数据完全未显示。

解决方案 #

1. 核心问题定位 #

• 原始数据中js字段是JSON字符串，未解析直接遍历会导致无法读取嵌套的cat_item和ng_value；
• 数据结构未适配Chart.js要求的labels+datasets格式，导致年份和类别数据映射错误。

2. 修正后的完整代码 #

// 1. 提取所有财年作为图表x轴标签
const fiscalYears = sampleData.data1.map(item => item.ng_fy);

// 2. 提取所有项目类别（以第一个财年的类别为基准，假设所有财年类别一致）
const projectCategories = JSON.parse(sampleData.data1[0].js).map(item => item.cat_item);

// 3. 构建Chart.js所需的datasets数组
const chartDatasets = projectCategories.map((category, idx) => {
  // 生成随机配色（也可自定义固定颜色）
  const bgColor = `rgba(${Math.floor(Math.random()*255)}, ${Math.floor(Math.random()*255)}, ${Math.floor(Math.random()*255)}, 0.6)`;
  
  return {
    label: category,
    data: sampleData.data1.map(yearData => {
      // 解析当前财年的项目数据，找到对应类别的数值并转为数字
      const targetItem = JSON.parse(yearData.js).find(item => item.cat_item === category);
      return targetItem ? Number(targetItem.ng_value) : 0;
    }),
    backgroundColor: bgColor,
    borderColor: bgColor.replace('0.6', '1'),
    borderWidth: 1
  };
});

// 4. 初始化柱状图
new Chart(document.getElementById('bar_chart'), {
  type: 'bar',
  data: {
    labels: fiscalYears,
    datasets: chartDatasets
  },
  options: {
    responsive: true,
    scales: {
      y: {
        beginAtZero: true,
        title: {
          display: true,
          text: '数值'
        }
      },
      x: {
        title: {
          display: true,
          text: '财年'
        }
      }
    },
    plugins: {
      legend: {
        position: 'top',
      },
      title: {
        display: true,
        text: '农业项目年度数据柱状图'
      }
    }
  }
});

3. 关键修正点 #

• 用JSON.parse()解析js字段的字符串，获取可遍历的项目数组；
• 按财年提取labels，按项目类别构建datasets，确保每个类别的数据与财年一一对应；
• 将字符串类型的ng_value转为数字，避免Chart.js无法识别数值。

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