へっぽこITエンジニア@名古屋のブログ

Follow me on GitHub

Google Chartsを使って名古屋の予想気温表示

Google Chartsを使って名古屋の予想気温表示します。

ちなみにソースは以下のように書きました。

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

  async function getTempsData(){
    //気象庁のデータを取得。
    let meteologicalData = await fetch("https://www.jma.go.jp/bosai/forecast/data/forecast/230000.json")
                             .then(res => res.json())
    return meteologicalData;
  };

  const transpose = a => a[0].map((_, c) => a.map(r => r[c]));

  function drawChart() {
    getTempsData().then(tempsData =>{
      let chartArray = [[]];
      chartArray[0] = tempsData[1].timeSeries[1].timeDefines;
      chartArray[1] = tempsData[1].timeSeries[1].areas[0].tempsMin;
      chartArray[2] = tempsData[1].timeSeries[1].areas[0].tempsMax;
      chartArray[0][0] = "日付";
      chartArray[1][0] = "最低気温";
      chartArray[2][0] = "最高気温";

      for(var i = 0; i < chartArray[0].length; i++){
        dateSplit = chartArray[0][i].split(/-|T/)
        chartArray[0][i] = dateSplit[1] + "月" + dateSplit[2] + "日"
        //「'」を削除
        if(chartArray[1][i].match(/\-?\d+(.\d+)?(e[\+\-]d+)?/)){
          chartArray[1][] = parseFloat(chartArray[1][i].replace("'", ''));
        }
        if(chartArray[2][i].match(/\-?\d+(.\d+)?(e[\+\-]d+)?/)){
          chartArray[2][i] = parseFloat(chartArray[2][i].replace("'", ''));
        }
      }

      chartArray = transpose(chartArray);
      let data = google.visualization.arrayToDataTable(chartArray);

      var options = {
        title: '名古屋の予想気温',
        legend: { position: 'bottom' },
        vAxis: {minValue:0,maxValue:40}
      };

      var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

      chart.draw(data, options);
    });
  }
</script>

<div id="curve_chart" style="width: 100%; height: 500px"></div>