無法連接不同的高分點

我對任何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