Angularjs for data visualization

Angularjs for data visualization

Preview

We use ANGULARJS to realize the data visualization of bar chart, line chart and so on. The effect is as shown.

Everyone can go to codepen-online preview-Download Collection-effect

Analysis

The following elements are required to implement this case:

• Basic knowledge of Angularjs
• Ng-repeat
• SVG Draw Line
• Passion and patience

Implementation of skeleton Building

We build the ANGULARJS environment in HTML, first introducing ANGULARJS, and then declaring Ng-app,ng-controller, as shown in the following code.

<script src="//cdn.bootcss.com/angular.js/1.3.8/angular.js"></script><div ng-app="graphApp">  <div ng-controller="graphController">    <!-- 数据图代码 -->  </div></div>

In the Javscript, the same skeleton is built.

(function(){  //定义模块  var app = angular.module(‘graphApp‘,[]);  //绑定控制器  app.controller(‘graphController‘function($scope){    //参数设置    //数据图设置  });// End Controller})();

Draw a bar chart

Then we put the code to draw the bar chart.

    <!--data Graph code --    <!--bar chart-->    <div class="Chart">      <!--axes --      <div class="y"></div>      <div class="x"></div>      <!--tabular Data --      <div ng-repeat="bar in Data" class="Bar"></div>    </div>

We use ANGUALRJS to bind data to HTML, and we put the data directly into the style attribute to set the bar width height and position.

    <!--data Graph code --    <!--bar chart-->    <div class="Chart" style="WIDTH:{{WIDTH}}PX; height:{{height}}px; " >      <!--Labels --      <div class="y" style="WIDTH:{{HEIGHT}}PX;" >{{YAxis}}</div>      <div class="x">{{Xaxis}}</div>      <!--Data --       <div ng-repeat="bar in Data" class="bar" style=" Height:{{bar.value/max * HEIGHT}}PX; WIDTH:{{WIDTH/DATA.LENGTH-5}}PX; left:{{$index/data.length * WIDTH}}PX; " ></div>    </div>

Then we use JS to set the data, need to request the maximum value of data.

( function(){  //define module  varApp = Angular.module (' Graphapp ',[]);//Binding controllerApp.controller (' Graphcontroller ', function($scope){    //Parameter settings, relative to the above code, what's new$scope. width = -; $scope. Height = -; $scope. YAxis =' Sales Results '; $scope. Xaxis =' 2014 sales changes ';//Data Settings$scope. data = [{label:' January ', Value: $}, {label:' February ', Value: Wu}, {label:' March ', Value: +}, {label:' April ', Value: the}, {label:' may ', Value: the}, {label:' June ', Value:104}, {label:' July ', Value:122}, {label:' August ', Value: the}, {label:' September ', Value:176}, {label:' October ', Value: Max}, {label:' November ', Value: -}, {label:' December ', Value:123}    ];//Seek maximum value$scope. Max =0;varArrlength = $scope. data.length; for(vari =0; i < arrlength; i++) {//Find Maximum X Axis Value        if($scope. data[i].value > $scope. max) $scope. max = $scope. Data[i].value; }  });//End Controller})();

Of course, the CSS (we use SCSS) also needs to do some related settings, as shown in the following code.

//layouts and styles* {box-sizing: Border-box;}H1,H2{Color: #D07371;}Body{font-size:1.1em;  text-align: Center;  background:#F4F0DC;  Color:#444;}//table settings, setting border and relative positioning. Chart{Border-left:1px solid black;  Border-bottom:1px solid black;  margin:px Auto;  position: relative;}//Axis settings. Y{Font-weight: bold;  Border-bottom:1px solid #71CBD0;  position: absolute;  text-align: Center;  padding: tenpx;  Transform: Rotate (-deg);  Transform-origin: bottom left;  Bottom:0;  Color: #D07371;}. x{Font-weight: bold;  Border-top:1px solid #71CBD0;  position: absolute;  width: %;  text-align: Center;  padding: tenpx;  Top:%;  Color:#D07371;}//bar chart Settings. Bar{background: Rgba (0,0,0.4);  position: absolute;  Bottom:0;&: Nth-of-type(even) {background: Rgba (0,0.4);}}

Draw other graphics

For the point graph, the implementation principle and the bar chart, no longer repeat.
For line charts, we use SVG to draw lines, as shown in the code below.

    <!--svg line chart-->    <h2>SVG Line Chart</H2>    <div class="Chart" style="WIDTH:{{WIDTH}}PX; height:{{height}}px; " >      <!--Labels --      <div class="y" style="WIDTH:{{HEIGHT}}PX;" >{{YAxis}}</div>      <div class="x">{{Xaxis}}</div>      <!--Data --      <svg style="WIDTH:{{WIDTH}}PX; height:{{height}}px; " >        < line ng-repeat= "line indata" x1="{{$index/data.length * width}}" 
       y1="{{data[$index -1].value/max * Height}}" x2="{{($index + 1)/Data.length * Width}} " y2=" {{Line.value/max * height}} ">        </line >      </svg>    </div>

Then set up CSS

// SVG line chartsvg {  position:absolute;  transform:rotateX(180deg);  left:0;}line  {  stroke:rgba(0,0,200,.4);  stroke-width:3px;}

Of course, we can also achieve a variety of graphics mashup, specific code to participate in codepen,-online preview-Download collection-.

Statement

Front-end development whqet, focus on front-end development, share related resources. CSDN Expert blog, Wang Haiqing hope to help you, limited to the author level limited, error inevitably, welcome to shoot Bricks!
welcome any kind of reprint, please indicate loading, keep this paragraph text.
This article is linked in the original, http://blog.csdn.net/whqet/article/details/44060443
You are welcome to visit the Independent blog Http://whqet.github.io

Angularjs for data visualization