因为分组错误而丢失数据。
我试着修复它，但是无法让它工作，所以我重新开始。让我来解释一下（下面的工作片段）。
您为json中的每个object推送到dataset中，但由于您使用分组字符，因此需要根据所有数据集的标签进行分组，我称之为dataLabel，因此不是x轴，而是Refurbrish NAGRIC & DB Semen Lab等
由于您要处理的是编码的JSON，我们首先对其进行解码：

var json = sampleData.data1;
for (let o in json) {
    json[o].js = JSON.parse(json[o].js).reduce((p, c) => ({ ...p, [c.cat_item]: c.ng_value}), {})
}

这个函数循环遍历json数组中的每一项，然后解码（JSON.parse()），并使用reduce()将object数组更改为如下所示的对象：

{
    "ng_fy": "2019/20",
    "js": {
      "Refurbrish NAGRIC & DB Semen Lab": "10",
      "Semen Bulls Purchased": "7",
      "No. Semen doses Procured": "8",
      "No. of Sexed Embryos Procured": "9",
      "Liquid nitrogen semen storage tanks procured": "11"
    }
  }

现在我们可以开始创建ChartJS想要的数据集了：

var dataLabels = Object.keys(json[0].js);
var dataset = dataLabels.map(dl => ({
    label: dl,
    data: json.map(o => o.js[dl])
}));

首先，从我们拥有的第一个对象中获取dataLabels，然后循环这些对象，现在我们只需要在json上循环（map()）来获取所有的datalabel（从上面），得到如下结构：

{
    "label": "Semen Bulls Purchased",
    "data": [
      "7",
      "15",
      "13",
      "19"
    ]
},
...

var ctx = document.getElementById("bar_chart").getContext('2d');
var 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\"}]"} ] }

var json = sampleData.data1;
for (let o in json) {
    json[o].js = JSON.parse(json[o].js).reduce((p, c) => ({ ...p, [c.cat_item]: c.ng_value}), {})
}

var labels = json.map(j => j.ng_fy);
var dataLabels = Object.keys(json[0].js);
var dataset = dataLabels.map(dl => ({
    label: dl,
    data: json.map(o => o.js[dl])
}));

var myBarChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: labels,
      datasets: dataset
    },
});

#bar_chart {
  width: 100%;
  height: 600px
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.1/chart.umd.js"></script>

<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <canvas id="bar_chart"></canvas>
    </div>
  </div>
</div>