AngularJS for data visualization

AngularJS for data visualization

Preview

We will study how to use AngularJS to visualize data such as bar charts and line charts. Shows the effect.

You can go to codepen-Online Preview-download favorites-Effect <喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> VcD4KPGgyIGlkPQ = "analysis"> Analysis

To implement this case, you must have the following elements:

AngularJS basics ng-repeat svg draw line passion and patience to build a skeleton

We set up the AngularJS environment in html, first introduce angularJS, and then declare ng-app and ng-controller, as shown in the following code.

<script src=//cdn.bootcss.com/angular.js/1.3.8/angular.js></script>

In javscript, the same skeleton is set up.

(Function () {// defines the module var app = angular. module ('graphapp', []); // bind the Controller app. controller ('graphcontroller', function ($ scope) {// parameter settings // Data graph settings}); // End Controller })();

Draw a bar chart

Then we put the code for drawing the bar chart.

 

We use AngualrJS to bind data to html. We put the data directly in the style attribute to set the width and height of the bar chart.

{{yAxis}} {{xAxis}}  

Then we use js to set the data, which requires the maximum value of the data.

(Function () {// defines the module var app = angular. module ('graphapp', []); // bind the Controller app. controller ('graphcontroller', function ($ scope) {// parameter settings, compared to the above Code, add content $ scope. width = 600; $ scope. height = 350; $ scope. yAxis = 'sales score '; $ scope. xAxis = 'sales status changed on October 11'; // data settings $ scope. data = [{label: 'january ', value: 36}, {label: 'february', value: 54}, {label: 'march', value: 62 }, {label: 'plain l', value: 82}, {label: 'may', value: 96}, {label: 'june', value: 104}, {label: 'july', value: 122}, {label: 'August ', value: 112}, {label: 'September', value: 176}, {label: 'October ', value: 150}, {label: 'november', value: 84}, {label: 'december', value: 123}]; // calculates the maximum value $ scope. max = 0; var arrLength = $ scope. data. length; for (var I = 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, you also need to make some settings in css (we use scss), as shown in the following code.

// Layout and style * {box-sizing: border-box;} h1, h2 {color: # D07371;} body {font-size: 1.1em; text-align: center; background: # F4F0DC; color: #444;} // table settings, set the border and relative positioning. chart {border-left: 1px solid black; border-bottom: 1px solid black; margin: 60px auto; position: relative;} // coordinate axis settings. y {font-weight: bold; border-bottom: 1px solid #71CBD0; position: absolute; text-align: center; padding: 10px; transform: rotate (-90deg ); transform-origin: bottom left; bottom: 0; color: # D07371 ;}. x {font-weight: bold; border-top: 1px solid #71CBD0; position: absolute; width: 100%; text-align: center; padding: 10px; top: 100%; color: # D07371;} // bar chart settings. bar {background: rgba (240, 0.4, 240); position: absolute; bottom: 0; &: nth-of-type (even) {background: rgba, 0.4);} www.bkjia.com}

Draw other images

For a point chart, the implementation principle is the same as that of a bar chart.
For a line chart, we use svg to draw lines. The Code is as follows.

SVG Line Chart {{yAxis}} {{xAxis}}

Set 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 mix of multiple images