← 記事に戻る 
# 高知県のダム貯水率をグラフ化してみた。

高知県のダム貯水率をグラフ化してみた。 親戚にダムに勤めている人がいるのがきっかけで貯水率って HPで表示させているのかなという事で調べてみました。 結果、かなり古いデザインサイトが現れた。 何とも懐かしい気持ちになりました。 そこでこの表からグラフ化してみたいなとか思って ゴニョゴニョ作ってみた。 ちなみにソースコードが変わると 抜き取り出来なくなります。 **追記：[やはり変更されていました2へ続く](https://zip358.com/2020/03/26/%e9%ab%98%e7%9f%a5%e7%9c%8c%e3%81%ae%e3%83%80%e3%83%a0%e8%b2%af%e6%b0%b4%e7%8e%87%e3%82%b0%e3%83%a9%e3%83%95%e5%8c%962.html)**ソースコードを貼っときます。 ajaxとPHPを使用してます、XPathで貯水率だけ抜き取ってます。 サンプルサイト <https://zip358.com/tool/demo6/index.html>

```php
<?php
$html = file_get_contents("高知県のダム情報のURL");
$html = mb_convert_encoding($html,"UTF-8","SJIS");
$dom = new DOMDocument();
$html = mb_convert_encoding($html, "HTML-ENTITIES", 'UTF-8');
@$dom->loadHTML($html,LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
$xpath = new DOMXPath($dom);
$ary=array(
    "nagase",
    "kamaidani",
    "kagami",
    "sameura",
    "kirimi",
    "sakamoto",
    "oodo",
    "nakasugawa",
    "iburigawa"
);
for($i=3;$i<=11;$i++){
    foreach ($xpath->query("/html/body/form/div[2]/table/tr/td/table/tr[$i]/td[7]") as $node) {
        $r[] = preg_replace("/x{00a0}/u","",$node->textContent);
    }
}
foreach ($r as $key => $value) {
    $obj[$ary[$key]] = $value;
}
print json_encode($obj);
```

```javascript
$(function(){
    dam();
    //setInterval(dam,9999)
});
function dam(){
    $.ajax({
        url　: './dam.php',
        dataType : 'json',
        success　: function(obj){
            $("#nagase").attr( "style","width:"+ parseInt(obj.nagase) +"%");
            $("#kamaidani").attr( "style","width:"+ parseInt(obj.kamaidani) +"%");
            $("#kagami").attr( "style","width:"+ parseInt(obj.kagami) +"%");
            $("#sameura").attr( "style","width:"+ parseInt(obj.sameura) +"%");
            $("#kirimi").attr( "style","width:"+ parseInt(obj.kirimi) +"%");
            $("#sakamoto").attr( "style","width:"+ parseInt(obj.sakamoto) +"%");
            $("#oodo").attr( "style","width:"+ parseInt(obj.oodo) +"%");
            $("#nakasugawa").attr( "style","width:"+ parseInt(obj.nakasugawa) +"%");
            $("#iburigawa").attr( "style","width:"+ parseInt(obj.iburigawa) +"%");
            $("#nagase").attr( "aria-valuenow",parseInt(obj.nagase));
            $("#kamaidani").attr( "aria-valuenow",parseInt(obj.kamaidani));
            $("#kagami").attr( "aria-valuenow",parseInt(obj.kagami));
            $("#sameura").attr( "aria-valuenow",parseInt(obj.sameura));
            $("#kirimi").attr( "aria-valuenow",parseInt(obj.kirimi));
            $("#sakamoto").attr( "aria-valuenow",parseInt(obj.sakamoto));
            $("#oodo").attr( "aria-valuenow",parseInt(obj.oodo));
            $("#nakasugawa").attr( "aria-valuenow",parseInt(obj.nakasugawa));
            $("#iburigawa").attr( "aria-valuenow",parseInt(obj.iburigawa));
            $("#nagase").text(obj.nagase + "%");
            $("#kamaidani").text(obj.kamaidani + "%");
            $("#kagami").text(obj.kagami + "%");
            $("#sameura").text(obj.sameura + "%");
            $("#kirimi").text(obj.kirimi + "%");
            $("#sakamoto").text(obj.sakamoto + "%");
            $("#oodo").text(obj.oodo + "%");
            $("#nakasugawa").text(obj.nakasugawa + "%");
            $("#iburigawa").text(obj.iburigawa + "%");
        },
        error: function(obj){
            alert("error");
        }
    });
  }
```

```markup

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>高知県のダム貯水率</title>
    <script src="../jquery/jquery-3.4.1.js"></script>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <script src="./js/dam.js"></script>
    <style>
        body{
            background-color: #3e4654;
            color: aliceblue;
        }
    </style>
</head>
<body class="d-flex flex-column h-100">
    <main role="main" class="flex-shrink-0">
        <div class="container">
            <table class="table table-dark">
                <tr>
                    <td style="width:15%">
                        <p>永瀬ダム</p>
                    </td>
                    <td style="width:85%">
                        <div class="progress"  style="width:100%">
                            <div id="nagase" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="20"
                                aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="width:15%">
                        <p>鎌井谷ダム</p>
                    </td>
                    <td style="width:85%">
                        <div class="progress">
                            <div id="kamaidani" class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" aria-valuenow="20"
                                aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="width:15%">
                        <p>鏡ダム</p>
                    </td>
                    <td style="width:85%">
                        <div class="progress">
                            <div id="kagami" class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar" aria-valuenow="20"
                                aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="width:15%">
                        <p>早明浦ダム</p>
                    </td>
                    <td style="width:85%">
                        <div class="progress">
                            <div id="sameura" class="progress-bar progress-bar-striped progress-bar-animated bg-secondary" role="progressbar" aria-valuenow="20"
                                aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="width:15%">
                        <p>桐見ダム</p>
                    </td>
                    <td style="width:85%">
                        <div class="progress">
                            <div id="kirimi" class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" aria-valuenow="20"
                                aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="width:15%">
                        <p>坂本ダム</p>
                    </td>
                    <td style="width:85%">
                        <div class="progress">
                            <div id="sakamoto" class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" aria-valuenow="20"
                                aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="width:15%">
                        <p>大渡ダム</p>
                    </td>
                    <td style="width:85%">
                        <div class="progress">
                            <div id="oodo" class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" aria-valuenow="20"
                                aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="width:15%">
                        <p>中筋川ダム</p>
                    </td>
                    <td style="width:85%">
                        <div class="progress">
                            <div id="nakasugawa" class="progress-bar progress-bar-striped progress-bar-animated bg-dark" role="progressbar" aria-valuenow="20"
                                aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="width:15%">
                        <p>以布利川ダム</p>
                    </td>
                    <td style="width:85%">
                        <div class="progress">
                            <div id="iburigawa" class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" aria-valuenow="20"
                                aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </main>
    <footer class="footer mt-auto py-3">
        <div class="container">
            <span class="text-muted">©zip358.com</span>
        </div>
    </footer>
</body>
</html>
```

 [ ![](https://zip358.com/wp-content/uploads/2026/01/image-24-scaled.png) 年齢とか技術とか見た目とかさ.

 ](https://zip358.com/2026/01/26/%e5%b9%b4%e9%bd%a2%e3%81%a8%e3%81%8b%e6%8a%80%e8%a1%93%e3%81%a8%e3%81%8b%e8%a6%8b%e3%81%9f%e7%9b%ae%e3%81%a8%e3%81%8b%e3%81%95.html) 

 [ ![](https://zip358.com/wp-content/uploads/2026/01/image-23.png) OSS：オープンソースソフトウェア

 ](https://zip358.com/2026/01/25/oss%ef%bc%9a%e3%82%aa%e3%83%bc%e3%83%97%e3%83%b3%e3%82%bd%e3%83%bc%e3%82%b9%e3%82%bd%e3%83%95%e3%83%88%e3%82%a6%e3%82%a7%e3%82%a2.html) 

 [ ![](https://zip358.com/wp-content/uploads/2026/01/image-21.png) お笑い芸人は貴方より

 ](https://zip358.com/2026/01/24/%e3%81%8a%e7%ac%91%e3%81%84%e8%8a%b8%e4%ba%ba%e3%81%af%e8%b2%b4%e6%96%b9%e3%82%88%e3%82%8a.html) 

 [ ![](https://zip358.com/wp-content/uploads/2026/01/G_FRW6fWwAAlplE-scaled.jpeg) ドラマ：冬と春のアレ

 ](https://zip358.com/2026/01/23/%e3%83%89%e3%83%a9%e3%83%9e%ef%bc%9a%e5%86%ac%e3%81%a8%e6%98%a5%e3%81%ae%e3%82%a2%e3%83%ac.html) 

 [ ![](https://zip358.com/wp-content/uploads/2024/10/image-20.png) 記事と英語とAI

 ](https://zip358.com/2026/01/22/%e8%a8%98%e4%ba%8b%e3%81%a8%e8%8b%b1%e8%aa%9e%e3%81%a8ai.html)