UNPKG

bird-api

Version:
55 lines (54 loc) 1.67 kB
<!DOCTYPE html> <html ng-app="myApp" lang="ja"> <head> <meta charset="UTF-8"> <title>日本の野鳥API</title> <script src="./bower_components/angular/angular.min.js"></script> <script src="./bower_components/Chart.js/Chart.js"></script> <script src="./bower_components/angular-chart.js/angular-chart.js"></script> <script src="./main.js"></script> <link rel="stylesheet" href="bower_components/angular-chart.js/dist/angular-chart.css"> <style> html, body {font-size: 18px;} h1, h2 {font-size: 1em;} section { padding: 0 2em; } #content { display: block; width: 100%; height: 200px; font-size: .75em; } #rank { display: block; margin-top: 0.5em; width:100px; font-size: .75em; } .pie-legend { display: inline-block; border:1px solid black; } ul.pi-legend li { display: block; width: 75px; } </style> </head> <body> <h1>日本の野鳥API</h1> <section ng-controller="birdNameHistogram"> <h2>鳥の名前出現頻度測定</h2> <textarea id="content" type="text" ng-model="content"></textarea> <select name="rank" id="rank" ng-model="rank" ng-change="request()"> <option value="species">種レベル</option> <option value="genus">属レベル</option> <option value="family">科レベル</option> <option value="order">目レベル</option> </select> <canvas id="pie" class="chart chart-pie" chart-data="data" chart-labels="labels"> </canvas> </section> </body> </html>