如何将自定义JSON数据对象转换为Highcharts Angular系列数据？

1. 按目标格式转换数据 #

通过Array.map遍历原始Matrix数组，快速生成符合要求的series结构：

// 假设原始JSON已解析为JavaScript对象
const rawData = {
  "Matrix": [
    {"mdate":"2002-02-09","mvalue":33.0,"mt":23,"mb":99},
    {"mdate":"2002-02-09","mvalue":34.0,"mt":23,"mb":99},
    {"mdate":"2002-03-09","mvalue":39.0,"mt":23,"mb":99},
    {"mdate":"2002-04-09","mvalue":340.0,"mt":23,"mb":99},
    {"mdate":"2002-05-09","mvalue":348.0,"mt":23,"mb":99}
  ]
};

// 生成目标格式的series数组
const series = rawData.Matrix.map((item, idx) => ({
  name: `m-${idx + 1}`,
  data: [item.mvalue, item.mt, item.mb]
}));

转换后的series完全匹配你给出的示例，每个元素对应Matrix中的一条数据。

2. 配置Highcharts显示标题与X轴分类 #

如果要让X轴对应data数组的三个指标，同时设置标题为Matrix，完整配置如下：

Highcharts.chart('your-container-id', {
  title: {
    text: 'Matrix'
  },
  xAxis: {
    categories: ['mvalue', 'mt', 'mb'],
    title: {
      text: '指标类型'
    }
  },
  series: series
});

3. 若需X轴显示日期（更合理的时间序列展示） #

如果核心需求是把mdate作为X轴分类，建议调整series结构，按指标分组（每个指标对应一个series），更符合时间序列数据的展示逻辑：

// 按指标分组整理数据
const metrics = { mvalue: [], mt: [], mb: [] };
const dateCategories = rawData.Matrix.map(item => item.mdate);

rawData.Matrix.forEach(item => {
  metrics.mvalue.push(item.mvalue);
  metrics.mt.push(item.mt);
  metrics.mb.push(item.mb);
});

// 生成按指标分组的series
const groupedSeries = Object.entries(metrics).map(([name, data]) => ({
  name,
  data
}));

// Highcharts配置
Highcharts.chart('your-container-id', {
  title: {
    text: 'Matrix'
  },
  xAxis: {
    categories: dateCategories,
    title: {
      text: '日期'
    }
  },
  series: groupedSeries
});

这种配置下，X轴会显示所有mdate值（包含重复日期），每个series对应一个指标的趋势变化，数据展示更直观。

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