JavaScriptで日の出日の入り

以前MATLABで日の出日の入りを計算したのですが、オリジナルのスクリプトはJavaScriptだったのでおうちモニターにつっこんでみました。

Chart.jsはv2.9.3を使っています。

日照計の三日分のグラフに線を引いてみます。

まずsuncalc.jsを読み込むようにします。

いくつか方法があるようですが、現在のコードの変更が少なくて済むpluginで実装してみます。

const verticalLinePlugin = {

  afterDatasetsDraw: function (chart, easing) {
      if (myChart.config.lineAtIndex) {
// NAOJ Mitaka
        lat = 35 + 40 / 60 + 30/76 / 60 / 60;
        lon = 139 + 32 / 60 + 16.27 / 60 / 60;
        var times = SunCalc.getTimes(new Date(), lat, lon);
        risetime = times.sunrise.getHours() * 60 + times.sunrise.getMinutes();
        risestr = String(times.sunrise.getHours()) + ":" + String(times.sunrise.getMinutes()).padStart(2, '0');
        settime = times.sunset.getHours() * 60 + times.sunset.getMinutes();
        setstr = String(times.sunset.getHours()) + ":" + String(times.sunset.getMinutes()).padStart(2, '0');
        const scale = myChart.chartArea;
        wid = scale.right - scale.left;
        sunrise = (wid / (23 * 60)) * risetime;
        sunrise += scale.left;
        sunset = (wid / (23 * 60)) * settime;
        sunset += scale.left;
        const context = myChart.chart.ctx;
        // render vertical line
        context.beginPath();
        context.strokeStyle = 'rgba(255, 10, 0, 0.6)';
        context.moveTo(sunrise, scale.top);
        context.lineTo(sunrise, scale.bottom);
        context.stroke();
        context.beginPath();
        context.strokeStyle = 'rgba(255, 10, 0, 0.6)';
        context.moveTo(sunset, scale.top);
        context.lineTo(sunset, scale.bottom);
        context.stroke();
        context.fillStyle = "#ff0000";
        context.textAlign = 'center';
        context.fillText(risestr, sunrise, (scale.bottom - scale.top) / 2 + scale.top);
        context.fillText(setstr, sunset, (scale.bottom - scale.top) / 2 + scale.top);
      }
  }
};

Chart.plugins.register(verticalLinePlugin);

を追加してChartのプロパティにlineAtIndex: 1を追加すると以下のようなグラフになります。

ちょっと見た目重いので、点線にしてみました。

context.setLineDash([2, 2]);

国立天文台の緯度経度にしてありますが、おうちの緯度経度はNTP ST1/GPSのclockstatの中の$GPRMCセンテンスのログに含まれています。

0時台の平均値が0の位置にあるのはちょっと不自然な気がしたので、調べて調整してみました。barと同じように真ん中でプロットするようにしてみました。

options: {
    ...
    scales: {
        xAxes: [{
            gridLines: {
                offsetGridLines: true
            }
        ]}
    }
}

ここのところ晴れて、直射があたるので、値がおかしいですが、気にしないでください。

ずれたぶん、線を移動してなくてバグってるし、なんか分かりにくいので、こうしてみました。