Angular中API返回数据在Highcharts散点图无法渲染数据点问题求助

你的代码存在以下3个核心问题，按优先级排序：

• 问题1：series.data的格式不符合Highcharts要求
  Highcharts中每个series的data字段必须是数据点数组，你当前赋值的是单个对象，就算只有一个数据点也要用数组包裹，这是图表不渲染的核心原因。
  你当前的错误写法：

this.scatterData.push({
              name: element.name,
              data: {
                x: element.xvalue,
                y: element.param,
                z: elememt.pointer
              }
            });

修改为：

this.scatterData.push({
              name: element.name,
              data: [{ // 用数组包裹单个数据点
                x: element.xvalue,
                y: element.param,
                z: element.pointer
              }]
            });

• 问题2：存在变量拼写错误
  你在赋值z值时把element拼写成了elememt，多了一个m，会导致z值读取为undefined，如果后续需要用到z值（比如切换为气泡图）会出现异常。
• 问题3：散点图默认不识别z值（可选调整）
  如果你需要用到z字段做维度映射，需要把图表类型从scatter改为bubble，散点图默认只读取x、y两个字段，不会处理z值，但这个问题不影响当前散点的渲染。

修改以上问题后图表即可正常渲染数据点，x、y轴数值也能正常读取。

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