I was using the getSales function for an old project. Now my boss made us switch of project and want us to implement the google charts api with the openweather api. With the code given above, display me a chart with 2 curves (one for max temp and one for min temp)





 const API\_Key = "b6f373b61c903c6f18fd774f963397b8";
 let city = "quebec";
 let url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API\_Key}`;
 let data = {
 "cod": "200",
 "message": 0,
 "cnt": 40,
 "list": [{
 "dt": 1647345600,
 "main": {
 "temp": 284.83,
 "feels\_like": 283.59,
 "temp\_min": 284.83,
 "temp\_max": 285.69,
 "pressure": 1013,
 "sea\_level": 1013,
 "grnd\_level": 964,
 "humidity": 59,
 "temp\_kf": -0.86
 },
 "weather": [{
 "id": 804,
 "main": "Clouds",
 "description": "overcast clouds",
 "icon": "04d"
 }],
 "clouds": {
 "all": 100
 },
 "wind": {
 "speed": 0.7,
 "deg": 288,
 "gust": 2.1
 },
 "visibility": 10000,
 "pop": 0,
 "sys": {
 "pod": "d"
 },
 "dt\_txt": "2022-03-15 12:00:00"
 },
 {
 "dt": 1647356400,
 "main": {
 "temp": 285.09,
 "feels\_like": 283.85,
 "temp\_min": 285.09,
 "temp\_max": 285.6,
 "pressure": 1016,
 "sea\_level": 1016,
 "grnd\_level": 961,
 "humidity": 58,
 "temp\_kf": -0.51
 },
 "weather": [{
 "id": 804,
 "main": "Clouds",
 "description": "overcast clouds",
 "icon": "04d"
 }],
 "clouds": {
 "all": 100
 },
 "wind": {
 "speed": 2.24,
 "deg": 26,
 "gust": 2.56
 },
 "visibility": 10000,
 "pop": 0.26,
 "sys": {
 "pod": "d"
 },
 "dt\_txt": "2022-03-15 15:00:00"
 },
 {
 "dt": 1647367200,
 "main": {
 "temp": 283.03,
 "feels\_like": 281.89,
 "temp\_min": 282.13,
 "temp\_max": 283.03,
 "pressure": 1020,
 "sea\_level": 1020,
 "grnd\_level": 961,
 "humidity": 71,
 "temp\_kf": 0.9
 },
 "weather": [{
 "id": 804,
 "main": "Clouds",
 "description": "overcast clouds",
 "icon": "04n"
 }],
 "clouds": {
 "all": 100
 },
 "wind": {
 "speed": 2.41,
 "deg": 169,
 "gust": 4.81
 },
 "visibility": 10000,
 "pop": 0.31,
 "sys": {
 "pod": "n"
 },
 "dt\_txt": "2022-03-15 18:00:00"
 },




 {
 "dt": 1647766800,
 "main": {
 "temp": 278.26,
 "feels\_like": 274.33,
 "temp\_min": 278.26,
 "temp\_max": 278.26,
 "pressure": 1030,
 "sea\_level": 1030,
 "grnd\_level": 966,
 "humidity": 54,
 "temp\_kf": 0
 },
 "weather": [{
 "id": 801,
 "main": "Clouds",
 "description": "few clouds",
 "icon": "02d"
 }],
 "clouds": {
 "all": 18
 },
 "wind": {
 "speed": 5.66,
 "deg": 89,
 "gust": 8.01
 },
 "visibility": 10000,
 "pop": 0,
 "sys": {
 "pod": "d"
 },
 "dt\_txt": "2022-03-20 09:00:00"
 },



 {
 "dt": 1647766800,
 "main": {
 "temp": 278.26,
 "feels\_like": 274.33,
 "temp\_min": 278.26,
 "temp\_max": 278.26,
 "pressure": 1030,
 "sea\_level": 1030,
 "grnd\_level": 966,
 "humidity": 54,
 "temp\_kf": 0
 },
 "weather": [{
 "id": 801,
 "main": "Clouds",
 "description": "few clouds",
 "icon": "02d"
 }],
 "clouds": {
 "all": 18
 },
 "wind": {
 "speed": 5.66,
 "deg": 89,
 "gust": 8.01
 },
 "visibility": 10000,
 "pop": 0,
 "sys": {
 "pod": "d"
 },
 "dt\_txt": "2022-03-20 09:00:00"
 }
 ],
 "city": {
 "id": 2867714,
 "name": "Munich",
 "coord": {
 "lat": 48.1374,
 "lon": 11.5755
 },
 "country": "DE",
 "population": 1260391,
 "timezone": 3600,
 "sunrise": 1647322046,
 "sunset": 1647364681
 }
 };
 //

 // fetch(url)
 // .then(res => res.json())
 // .then(data => console.log(data));

 //
 $(document).ready(init\_UI)

 function init\_UI() {
 google.charts.load('current', { packages: ['corechart'], language: 'En' });
 google.charts.setOnLoadCallback(getSales);
 $(window).resize(function () {
 getSales();
 });
 }

 function getSales() {
 let sales = [];
 let mois = ["janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre"];
 let ventes = [6500, 5550, 4000, 4500, 2500, 1500, 500, 1000, 1500, 2000, 4000, 3500];
 for (let v = 0; v < ventes.length; v++) {
 sales.push([mois[v], ventes[v]]);
 }
 sales.unshift(['Month', 'Sales']);
 var options\_curve = {
 title: "Ventes 2020",
 titleTextStyle: { fontSize: '32', color: 'green' },
 vAxis: { format: 'currency' },
 hAxis: { title: 'Mois', slantedText: true },
 curveType: 'function',
 legend: { position: 'top' },
 series: { 0: { color: 'cyan' } }
 };
 console.log(sales);

 var data = google.visualization.arrayToDataTable(sales);
 var formatter = new google.visualization.NumberFormat({ prefix: '$' });
 formatter.format(data, 1); // Apply formatter to second column
 var chart\_curve = new google.visualization.LineChart(document.getElementById('curve\_chart'));
 chart\_curve.draw(data, options\_curve);
 }
2 / 2
이전 프로젝트에서 getSales 함수를 사용하고 있었습니다. 이제 제 상사가 프로젝트를 바꾸면서 오픈웨더 API로 구글 차트 API를 구현하라고 했습니다. 위에 주어진 코드를 사용하여 두 개의 곡선(하나는 최대 온도, 하나는 최소 온도)이 있는 차트를 표시해 주세요. const API\_Key = "b6f373b61c903c6f18fd774f963397b8"; let city = "퀘벡"; let url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API\_Key}`; let data = { "cod": "200", "메시지": 0, "cnt": 40, "list": [{ "dt": 1647345600, "main": { "temp": 284.83, "feels\_like": 283.59, "temp\_min": 284.83, "temp\_max": 285.69, "압력": 1013, "sea\_level": 1013, "GRND\_LEVEL": 964, "습도": 59, "temp\_kf": -0.86 }, "weather": [{ "id": 804, "main": "구름", "설명": "흐린 구름", "icon": "04d" }], "구름": { "all": 100 }, "wind": { "속도": 0.7, "deg": 288, "gust": 2.1 }, "가시성": 10000, "pop": 0, "sys": { "pod": "d" }, "dt\_txt": "2022-03-15 12:00:00" }, { "dt": 1647356400, "main": { "temp": 285.09, "feels\_like": 283.85, "temp\_min": 285.09, "temp\_max": 285.6, "pressure": 1016, "sea\_level": 1016, "GRND\_LEVEL": 961, "습도": 58, "temp\_kf": -0.51 }, "weather": [{ "id": 804, "main": "구름", "설명": "흐린 구름", "icon": "04d" }], "구름": { "all": 100 }, "wind": { "speed": 2.24, "deg": 26, "gust": 2.56 }, "가시성": 10000, "pop": 0.26, "sys": { "pod": "d" }, "dt\_txt": "2022-03-15 15:00:00" }, { "dt": 1647367200, "main": { "temp": 283.03, "feels\_like": 281.89, "temp\_min": 282.13, "temp\_max": 283.03, "압력": 1020, "sea\_level": 1020, "GRND\_LEVEL": 961, "습도": 71, "temp\_kf": 0.9 }, "weather": [{ "id": 804, "main": "구름", "설명": "흐린 구름", "아이콘": "04n" }], "구름": { "all": 100 }, "wind": { "speed": 2.41, "deg": 169, "gust": 4.81 }, "가시성": 10000, "pop": 0.31, "sys": { "pod": "n" }, "dt\_txt": "2022-03-15 18:00:00" }, { "dt": 1647766800, "main": { "temp": 278.26, "feels\_like": 274.33, "temp\_min": 278.26, "temp\_max": 278.26, "pressure": 1030, "sea\_level": 1030, "GRND\_LEVEL": 966, "습도": 54, "temp\_kf": 0 }, "weather": [{ "id": 801, "main": "구름", "설명": "구름 몇 개", "icon": "02d" }], "구름": { "all": 18 }, "wind": { "speed": 5.66, "deg": 89, "gust": 8.01 }, "가시성": 10000, "pop": 0, "sys": { "pod": "d" }, "dt\_txt": "2022-03-20 09:00:00" }, { "dt": 1647766800, "main": { "temp": 278.26, "feels\_like": 274.33, "temp\_min": 278.26, "temp\_max": 278.26, "pressure": 1030, "sea\_level": 1030, "GRND\_LEVEL": 966, "습도": 54, "temp\_kf": 0 }, "weather": [{ "id": 801, "main": "구름", "설명": "구름 몇 개", "icon": "02d" }], "구름": { "all": 18 }, "wind": { "speed": 5.66, "deg": 89, "gust": 8.01 }, "가시성": 10000, "pop": 0, "sys": { "pod": "d" }, "dt\_txt": "2022-03-20 09:00:00" } ], "city": { "id": 2867714, "name": "Munich", "coord": { "lat": 48.1374, "lon": 11.5755 }, "country": "DE", "인구": 1260391, "시간대": 3600, "sunrise": 1647322046, "sunset": 1647364681 } }; // // fetch(url) // .then(res => res.json()) // .then(data => console.log(data)); // $(document).ready(init\_UI) 함수 init\_UI() { google.charts.load('current', { packages: ['corechart'], language: 'En' }); google.charts.setOnLoadCallback(getSales); $(window).resize(function () { getSales(); }); } function getSales() { let sales = []; let mois = ["janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "september", "octobre", "novembre", "décembre"]; let ventes = [6500, 5550, 4000, 4500, 2500, 1500, 500, 1000, 1500, 2000, 4000, 3500]; for (let v = 0; v < ventes.length; v++) { sales.push([mois[v], ventes[v]]); } sales.unshift(['Month', 'Sales']); var options\_curve = { title: "벤테스 2020", titleTextStyle: { fontSize: '32', color: 'green' }, vAxis: { format: '통화' }, hAxis: { title: 'Mois', slantedText: true }, curveType: '함수', legend: { 위치: '상단' }, series: { 0: { color: '시안' } } }; console.log(sales); var data = google.visualization.arrayToDataTable(sales); var formatter = new google.visualization.NumberFormat({ 접두사: '$' }); formatter.format(data, 1); // 두 번째 열에 포맷터 적용 var chart\_curve = new google.visualization.LineChart(document.getElementById('curve\_chart')); chart\_curve.draw(data, options\_curve); }2 / 2