Javascript 图表JS |动态创建的线图中的线未连接点_Javascript_Chart.js

Javascript 图表JS |动态创建的线图中的线未连接点

javascript chart.js

Javascript 图表JS |动态创建的线图中的线未连接点,javascript,chart.js,Javascript,Chart.js,我正在尝试创建这个动态创建的折线图。数据点显示正确，但未通过线连接。如何确保该行出现？代码的最后一部分可能与我的问题最相关，但所有其他代码也包括在内 HTML <script src = https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js></script> </head> <body> <h1> Where is the ISS? </h1>

我正在尝试创建这个动态创建的折线图。数据点显示正确，但未通过线连接。如何确保该行出现？代码的最后一部分可能与我的问题最相关，但所有其他代码也包括在内

HTML

<script src = https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js></script>

</head>

<body> 

<h1> Where is the ISS? </h1>


<h3 id = 'long'> </h3>

<h3 id = 'lat'> </h3>

<h3 id = 'visibility'> </h3>

<canvas id = 'myChart'> </canvas>

 <script>
 const api_url = 'https://api.wheretheiss.at/v1/satellites/25544'

 setInterval(getISS, 5000);

 let longs = [];

 let i = 0;
xAxisArr = []
function xAxis(){
  i += 5;
  x = (i / 5) - 1;
  xAxisArr.push(`${i} Seconds Ago`)
}

 async function getISS(){
   const response = await fetch (api_url)
   const data = await response.json();
   const { latitude, longitude, visibility } = data;

longs.push(longitude);
xAxis();
console.log(x);
addData(myChart, xAxisArr[x], longs)



document.getElementById('long').textContent = `Longitude: ${longitude}`;
document.getElementById('lat').textContent = `Latitude: ${latitude}`;
document.getElementById('visibility').textContent = `Visibility: ${visibility}`;

function addData(chart, label, data) {
    chart.data.labels.push(label);
    chart.data.datasets.forEach((dataset) => {
      dataset.data.push(data);
     });
  chart.update();
 }

 var ctx = document.getElementById('myChart').getContext('2d');
 Chart.defaults.global.defaultColor = 'blue'

   let myChart = new Chart(ctx, {
     type: 'line',
      data: {
      labels: [], //'10 Seconds', '15 Seconds', '20 Seconds', '25 Seconds', '30 Seconds'],
       datasets: [{
        label: 'longitude',
        data: longs,
        backgroundColor: 'rgb(255, 99, 132)',
        borderColor: 'rgb(255, 99, 132)',
        borderWidth: 1
       }]
    
   },
  options: {}
  });