JSFiddle - React, Tailwind, and code Playground

HTML

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

<canvas id="doughnutChart"></canvas>

JavaScript

// 気象庁のAPIから天気予報JSONファイルを読み取る
const KYOTO = 260000;
const TOKYO = 130000;
const OSAKA = 270000;
const KANAGAWA = 140000;
const HYOGO = 	280000;

const areaCodes= {"京都": KYOTO, "大阪":OSAKA, "兵庫":HYOGO, "東京":TOKYO, "神奈川": KANAGAWA};

//APIからデータを得る関数
async function getData(areaCodes) {
  let result = [];
  for (const areaCode of areaCodes) {
  	var url = `https://www.jma.go.jp/bosai/forecast/data/forecast/${areaCode}.json`
		var res = await fetch(url);
    var weather = await res.json();
    result.push(weather);
  }
  
  return result
}

// JSONデータ取得後に呼び出す関数
function formatWeather(weathers){
  let weatherSummary = {"clear": 0,"cloudy": 0, "rain": 0, "snow": 0};
  
	for (const weather of weathers) {
  	//データから週間予報を取得
    const weeklyWeather = weather[1].timeSeries[0].areas[0];
    const weatherCodes = weeklyWeather.weatherCodes;
    
    for (const code of weatherCodes) {
    	if (Number(code) < 200) {
      	//100台＝晴れ(clear)
        weatherSummary.clear += 1;
      } else if (Number(code) < 300) {
      	//200台＝曇
        weatherSummary.cloudy += 1;
      } else if (Number(code) <400) {
      	//300台＝曇
        weatherSummary.rain += 1;
      } else{
      	//400台＝曇
        weatherSummary.snow += 1;
      } 
    }
  }
  return weatherSummary
}


//ここがグラフの設定
function chartMaker (keys, data) {
  // 棒グラフの設定
  let doughnutCtx = document.getElementById("doughnutChart");
  let doughnutConfig = {
    type: 'doughnut',
    data: {
      labels: keys,  //clearなどのラベル
      datasets: [{
        data: data,
        backgroundColor: [  // それぞれの領域の色を設定(dataの数だけ)
          '#ffff00',
          '#808080',
          '#4169e1',
          '#00ffff',
        ]
      }]
    },
  };
  let doughnutChart = new Chart(doughnutCtx, doughnutConfig);
 }
 
 
 async function fn(areaCodes) {
  let codes = [];
  
 	for (var key in areaCodes) {
    codes.push(areaCodes[key]);
  }
 	const weathers = await getData(codes);
  const data = formatWeather(weathers);
  
  let keys = [];    //clearなどのラベル
  let...