BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

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

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

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

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

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

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

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

Получай обновления блога!!! Подпишись:

Популярные статьи:

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

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

Subscribe without commenting

Метки: ,

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 747
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 4092