AngularJS SVG chart

Graf v podobe SVG.

Z tabuľky údajov je vytvorený dynamický graf.

Graf

script

<script src=https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js></script>

svg-chart.html

<style>
.chart {
  width: 300px;
  height: 150px;
  border-radius: 8px;
  overflow: hidden;
}

.chart_content {
  background: #b6e356;
}

.chart_line {
  fill: none;
  stroke: #fff;
  stroke-width: 2px;
}

.chart_horizontal_line{
  fill: none;
  stroke: #fff;
  stroke-width: 1px;
}

.chart_circle {
  fill: #fff;
  radius: 5px;
}
</style>

<div ng-app="myApp" ng-controller="myCtrl">
    <h3>Graf</h3>

    <div class="chart">
    <svg xmlns="http://www.w3.org/2000/svg" class="chart_content">
      <line x1="10" y1="50" x2="290" y2="50" class="chart_horizontal_line" />
      <line x1="10" y1="100" x2="290" y2="100" class="chart_horizontal_line" />
      <path class="chart_line" ng-attr-d="{{linePath()}}"></path>
      <circle class="chart_circle" r="5" ng-repeat="p in points" ng-attr-cx="{{p.x}}" ng-attr-cy="{{p.y}}"></circle>
    </svg>
    </div>
</div>

svg-chart.js

var app = angular.module('myApp', []);

app.controller('myCtrl', ['$scope', function($scope) {

  var points = [
    {x: 30, y: 60},
    {x: 100, y: 110},
    {x: 200, y: 40},
    {x: 280, y: 30}
  ];

  $scope.points = points;

  $scope.linePath = function(){
    var pathParts = [], currentPoint, i;

    for(i=0;i<points.length;i++) {
      currentPoint = points[i];
      pathParts.push(currentPoint.x + "," + currentPoint.y);
    }

    return "M" + pathParts.join(" L");
  };

}]);

Aplikácie

Menu