Всем привет!
В интернете нашел интересный способ создания графики на 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>
То в конечном результате у вас выйдет на странице вот такой график в %:
Можно добавлять новые поля, если нажмете
на кнопку «Добавить+»:
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 Март 2013
Прокомментировано:90
просмотров: 277181 -
Размеры форматов листов А0 – А7
Дата: 23 Январь 2013
Прокомментировано:2
просмотров: 218599 -
Установка windows 7 на ноутбук
Дата: 18 Декабрь 2012
Прокомментировано:167
просмотров: 170559 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 Ноябрь 2014
Прокомментировано:5
просмотров: 159106 -
Как удалить WebCake (всплывающая реклама в браузере)
Дата: 22 Июль 2013
Прокомментировано:44
просмотров: 141045
Добавить комментарий
Метки: Вебмастеру, для сайта
Ну вот, есть возможность Вам написать в комментариях про ping…
⇒ Открыть статью ⇐