无法连接不同的高分点

我对任何javascript/html等编码都非常陌生，所以请原谅我，如果这是一个愚蠢的问题。无法连接不同的高分点

我正试图设计一个计算器，它可以根据一些输入项目来计算你的退休收入。计算器工作正常，作为产出的一部分，我想描绘一下退休收入随退休年龄的变化。

我写了一个小小的脚本，用结果[[退休年龄1，收入1]，[退休年龄2，收入2] ...等]填充数组。我的代码中的这个数组称为agePoints，然后我想使用高图线图来绘制结果图。

我遇到的问题是该图显示的是不同的点而不是一条线。我已经尝试了一些解决方案，但都没有成功。

，如果你能

代码如下，请帮忙：

$(function() { 
    $('#container').highcharts({ 
     chart: { 
      type:'line' 
     }, 
     title: { 
      text: 'Retirement Income', 
      x: -20 //center 
     }, 
     subtitle: { 
      text: 'Income by Retirement Age', 
      x: -20 
     }, 
     xAxis: { 
      // axisPoints is an array which contains the retirement ages only 
      categories: axisPoints 
      min:axisPoints[1], 
      title: { 
       text: 'Retirement Age' 
      } 
      //categories: axisPoints 

     }, 
     yAxis: { 
      min:0, 
      title: { 
       text: 'Monthly Income' 
      }, 
     }, 
     legend: { 
      enabled:false 
     }, 
     credits: { 
      enabled: false 
     }, 
     //one thing I tried below to get it to work 
     plotOptions: { 
      series: { 
       connectNulls: true 
        } 
        }, 
     series: [{ 
      name: 'Projected Income', 
      // age points is the array mentioned in my question above 
      data: agePoints 
     }] 
    }); 
});

图表看起来是这样的：

enter image description here