<!DOCTYPE html>
<html ng-app="">
<head>
<meta charset="UTF-8" />
<link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="angular.js@*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular.js"></script>
<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script data-require="d3@*" data-semver="3.4.1" src="http://d3js.org/d3.v3.js"></script>
<script src="https://rawgithub.com/alangrafu/radar-chart-d3/master/src/radar-chart-min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script>
function Ctrl($scope, $interval){
$scope.name = "JS 太郎";
$scope.node = 3;
$scope.jquery = 3;
$scope.ux = 3;
$scope.css = 3;
$scope.math = 3;
$interval(function(){
d = [
[
{axis: "Node.js", value: $scope.node},
{axis: "jQuery", value: $scope.jquery},
{axis: "Math", value: $scope.math},
{axis: "UX", value: $scope.ux},
{axis: "CSS", value: $scope.css}
]
];
RadarChart.draw("#chart", d, {w:200, h:200,levels: 0, factor: 0.8, factorLegend:0.6});
}, 2000);
}
</script>
<style>
.meishi{
position: relative;
width: 9.1cm;
height:5.5cm;
background: white;
border: 1px solid gray;
}
#chart{
position: absolute;
top: 10px;
left: 0px;
}
#namae{
position: absolute;
top: 140px;
right: 20px;
font-size: 3rem;
}
#role{
position: absolute;
top: 180px;
right: 20px;
font-size: 1rem;
}
#nojquery{
position: absolute;
top: 190px;
right: 20px;
font-size: 1rem;
}
</style>
</head>
<body ng-controller="Ctrl">
<div class="container">
<h1>JSer名刺</h1>
<div class="meishi">
<div id="chart"></div>
<div id="namae">{{name}}</div>
<div id="role">{{role}}</div>
<div id="nojquery" ng-show="nojquery">※jQuery のこととかきかれても困ります</div>
</div>
<br />
<input type="text" ng-model="name">
Role
<select ng-model="role">
<option value="フロントエンド サーバサイド エンジニア">フロントエンド サーバサイド エンジニア</option>
<option value="バックエンド サーバサイド エンジニア">バックエンド サーバサイド エンジニア</option>
<option value="フロントエンド クライアントサイド エンジニア">フロントエンド クライアントサイド エンジニア</option>
<option value="バックエンド クライアントサイド エンジニア">バックエンド クライアントサイド エンジニア</option>
</select>
<br />
<label>
<input type="checkbox" ng-model="nojquery" />
No jQuery
</label>
<br>
Node.js:
<select ng-model="node">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
CSS:
<select ng-model="css">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
ux:
<select ng-model="ux">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
Math:
<select ng-model="math">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
jQuery:
<select ng-model="jquery">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
</body>
</html>
// Code goes here
/* Styles go here */