如何拆分单个JSON数组为Chart.js所需x/y值与多图表数据集

你可以根据当前的技术栈选择两种实现方式，第二种从根源优化数据结构，更推荐长期使用。

方案1：前端直接拆分现有扁平数组 #

如果暂时不想改后端逻辑，直接在前端拿到序列化数组后按规则拆分即可，核心逻辑是：每两个元素为一组[x轴键, y轴值]，遇到x=0时即为新数据集的起点，最后补全每个数据集缺失的x轴对应值为0。

// 后端返回的原始一维数组
const rawArray = [0,34,1,56,2,93,0,33,1,88,2,56,1,68];

// 第一步：切割为[x, y]点对
const pointPairs = [];
for (let i = 0; i < rawArray.length; i += 2) {
  pointPairs.push([rawArray[i], rawArray[i+1]]);
}

// 第二步：按x=0为边界拆分数据集
const rawDatasets = [];
let currentDataset = null;
pointPairs.forEach(([x, y]) => {
  if (x === 0) {
    currentDataset = [];
    rawDatasets.push(currentDataset);
  }
  currentDataset.push(x, y);
});

// 第三步：补全每个数据集缺失的x轴值，缺失填0
const xAxisKeys = [0, 1, 2]; // 你所有x轴的固定键值
const finalDatasets = rawDatasets.map(set => {
  const valueMap = {};
  for (let i = 0; i < set.length; i += 2) {
    valueMap[set[i]] = set[i+1];
  }
  const fullSet = [];
  xAxisKeys.forEach(key => {
    fullSet.push(key, valueMap[key] ?? 0);
  });
  return fullSet;
});

最终finalDatasets输出就是你需要的三个独立数组，可以直接传入对应Chart.js实例使用。

方案2：后端优化输出结构（推荐） #

你当前在Model层拼接一维数组的方式维护成本很高，后续新增x轴类目、调整图表数量时很容易出现索引错位问题。完全不需要为每个图表写重复函数，直接在后端按图表维度分组组装结构化数据，序列化后前端可以直接使用：

// 定义所有x轴固定键，和前端x轴类目一一对应
var allXAxisKeys = new List<int> { 0, 1, 2 };

var chartDatasets = CountryData
    .ToList()
    // 外层分组维度对应单个独立图表，和你原有外层GroupBy逻辑一致
    .GroupBy(/* 你的外层分组条件，每个分组生成1个柱状图数据集 */)
    .Select(chartGroup => 
    {
        // 提取当前图表下已存在的x键->y值映射
        var existingValueMap = chartGroup
            .GroupBy(/* 你的内层分组条件 */)
            .ToDictionary(g => g.Key, g => /* 你原有计算y值的逻辑，比如g.Count()、g.Sum(...) */);
        
        // 按固定x轴顺序组装数组，缺失值自动补0
        var singleChartData = new List<int>();
        foreach (var key in allXAxisKeys)
        {
            singleChartData.Add(key);
            singleChartData.Add(existingValueMap.TryGetValue(key, out int yValue) ? yValue : 0);
        }
        return singleChartData;
    })
    .ToList();

// 直接序列化嵌套集合，前端拿到的就是已经拆分好的多组数据集
return Json.SerializeObject(chartDatasets);

这个方案不管你需要生成多少个图表，只要外层分组逻辑正确，就会自动生成对应数量的数据集，缺省值自动补0，后续新增x轴类目只需要修改allXAxisKeys集合即可，没有冗余重复代码。

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