jinryu/all.html at main · code4fukui/jinryu · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><link rel="icon" href="data:">
  <script src="https://cdn.jsdelivr.net/npm/d3@5.16.0/dist/d3.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/c3@0.7.20/c3.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/c3@0.7.20/c3.min.css" rel="stylesheet">
</head><body>
<h1>人流データ</h1>
<div id=chart></div>

<script type="module">
import { fetchDataJinryu } from "./fetchDataJinryu.js";

const data = await fetchDataJinryu();
console.log(data);

const param = new URL(location.href).searchParams;

const showChart = (bindto, data) => {
  const dt = [];
  const cnt = [];
  for (const d of data) {
    dt.push(new Date(d.dt));
    cnt.push(d.data);
  }
  const chart = c3.generate({
    data: {
        x: 'x',
        columns: [
            ['x', ...dt],
            ['count', ...cnt],
        ]
    },
    axis: {
        x: {
            type: "timeseries",
            tick: {
                //format: '%Y-%m-%dT%H:%M:%S+09:00'
                format: '%Y-%m-%d %H:%M:%S', //+09:00'
                //format: '%Y-%m-%d %H' // %H:%M:%S', //+09:00'
                rotate: 50,
              }
        }
    },
    zoom: {
      enabled: true,
    }
  });
};

const redraw = () => {
  showChart("#chart", data);
};

setInterval(redraw, 5 * 60 * 1000);
redraw();

</script>

<a href=days.html>日毎集計</a><br>
<br>

<script type="module" src="https://js.sabae.cc/QRCode.js"></script>
<qr-code></qr-code>