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

Всем привет!
В интернете нашел интересный способ создания графики на 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[type="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>

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

Можно добавлять новые поля, если нажмете
на кнопку «Добавить+»:

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Добавить комментарий

Нажмите, чтобы отменить ответ.

Имя (required)

Mail (will not be published) (required)

Сайт

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Сообщить мне о новых комментариях по электронной почте

Отменить написание комментария

Subscribe without commenting
E-Mail:

Метки: Вебмастеру, для сайта