从数据库获取数据，传输到html制作图表无法显示

问题遇到的现象和发生背景

共两个function，第一个显示从数据库读取的数据有效，第二个将获取的数据做成图表

问题相关代码，请勿粘贴截图
<!DOCTYPE html>
<html lang="en">
    <head>
      <title>Final Assigment</title>
        <script type="text/javascript"></script>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <script defer src="final.js"></script>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
        <link rel="stylesheet" href="final.css">
    </head>

      <body onload="thirty_measurement()">
        <h2>Tier2 </h2>
        <button id="thirty_measurement">Recent weather data</button>
        <button id="twenty_temp">Recent weather data</button>
        <button id="twenty_wind">Recent weather data</button>
        <button id="user_interface">User Interface</button>
        <div id="output"></div>
        <canvas id="weather_chart" width="500" height="400">
      </body>

      </html>

document.getElementById('thirty_measurement').addEventListener('click', thirty_measurement);

let chart1=null;

function thirty_measurement() {
    fetch("http://webapi19sa-1.course.tamk.cloud/v1/weather")
    .then((res) => res.json())
    .then((data) => {
        let output = '<h2>30 Weather Data</h2>';
        let x_axis=new Array();
        let y_axis=new Array();
        for(let i = 0; i < 30; i++) {
            const weatherData = data[i];

            let arr = weatherData.date_time.split('T')
            let sep_date = arr[0];
            let sep_time = arr[1];
            x_axis[i]=sep_time[0];
            y_axis[i]=weatherData.data;
            output += `

    <table class="tableView1">
        <tr>
            <th>Row Number</th>
            <th>Measurement Date</th>
            <th>Measurement Time</th>
            <th>Measurement Type</th>
            <th>Measured value</th>
        </tr>
        <tr>
            <td>${i + 1}</td>
            <td>${sep_date}</td>
            <td>${sep_time}</td>
            <td>${Object.keys(weatherData.data)}</td>
            <td>${Object.values(weatherData.data)}</td>
        </tr>

        </table>
        `;
        }
        document.getElementById('output').innerHTML = output;
        chart2(x_axis,y_axis);
    })

}

function chart2(sep_date,weatherData){
            
    const ctx=document.getElementById('weather_chart').getContext('2d');
    if(chart1!=null){
        chart1.destroy();
    }
        chart1=new Chart(ctx,{
            type: 'bar',
            data:{
                labels:sep_date,
                datasets: [{
                    label:'Chart Of 30 Weather Data',
                    data: weatherData,
                    backgroundColor:'reba(127,255,127,0.4)',
                    borderWidth:3,
                }]
            },
            options:{
                legend:{
                    display: false
                },
                scales:{
                    yAxes: [{
                        ticks:{
                            beginAtZero: true
                        }
                    }]
                },
                animation: false,
                events:[]
            }
          });
        
}
运行结果及报错内容

运行结果，可以显示第一个数据，第二个显示空白表格

我的解答思路和尝试过的方法

我猜测是第一个function里面

            let arr = weatherData.date_time.split('T')
            let sep_date = arr[0];
            let sep_time = arr[1];
            x_axis[i]=sep_time[0];
            y_axis[i]=weatherData.data;

这一部分不可行

我想要达到的结果

第一个function顺利读取，第二个function可以根第一个function制作表格

控制台是否有报错呢？