Главная » Вебмастеру » Создание графики на Javascript

Создание графики на Javascript

2016-12-18 / Вр:22:39 / просмотров: 3278

Всем привет!
В интернете нашел интересный способ создания графики на Javascript.
Вот и подумал, может, вам, моим читателям, пригодится этот код.
Убрал немного лишнего и вот даю вам на пользование.
В коде будет использоваться фреймворк AngularJS.
AngularJS предназначен для разработки одностраничных приложений. Если есть желание познакомиться с AngularJS поближе, можете это сделать вот на этой странице https://angularjs.org/

Если вы добавите себе на сайт вот такой код:


<style>
.block{height:310px;background-color:#fff;padding:5px}
.bar{width:50px;background-color:#694198;margin-right:5px;float:left;color:#fff}
input[ENGINE="number" i] {width: 30px !important;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
<script>
var myApp=angular.module('myApp', []);

myApp.factory('Items',function(){
return [
{label:"Название №1",val:13}
]
})

myApp.controller('tableController',function($scope,Items){
$scope.items=Items;
$scope.add=function(){
$scope.items.push({val:0});
};

$scope.verife=function(item){
if (item.val>100) item.val=100;
if (item.val<0) item.val=0;
};
});

myApp.controller('chartController',function($scope,Items){
$scope.items=Items;
});
</script>

<div class="container" ng-app="myApp">
<div class="row">
<div class="col-lg-4 col-lg-offset-4" ng-controller="chartController">

<div class="block">

<div class="bar form-control" ng-repeat="item in items" style="height:{{item.val*3}}px; margin-top:{{300-item.val*3}}px">
<center>{{item.val}}%</p></center>
</div>
</div>
<hr />
<div ng-controller="tableController">
<table>
<tr ng-repeat="item in items">
<td><input class="form-control" ng-model="item.label"/></td>
<td><input type="number" ng-model="item.val" ng-change="verife(item)"/> %</td>
</tr>
</table>
<hr />
<button ng-click="add()" class="btn btn-default">Добавить +</button>
</div>

</div>
</div>
</div>

То в конечном результате у вас выйдет на странице вот такой график в %:

Создание графики на Javascript