码迷,mamicode.com
首页 > Web开发 > 详细

[D3 + AngularJS] 15. Create a D3 Chart as an Angular Directive

时间:2015-06-07 23:03:39      阅读:135      评论:0      收藏:0      [点我收藏+]

标签:

Integrating D3 with Angular can be very simple. In this lesson, you will learn basic integration as well as how to create D3 charts that can be packaged as AngularJS directives.

 

<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
</head>
<body>

<div ng-view></div>

<!-- AngularJS Partial Template Start -->  
<script type="text/ng-template" id="chartTpl">
  <button ng-click="setSubject(‘math‘)">Math</button>
  <button ng-click="setSubject(‘science‘)">Science</button>
  <button ng-click="setSubject(‘reading‘)">Reading</button>

  <div area-chart class="area-chart" chart-data="chartData"></div>
</script>
<!-- AngularJS Partial Template End -->  

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.min.js"></script>

</body>
</html>

 

[D3 + AngularJS] 15. Create a D3 Chart as an Angular Directive

标签:

原文地址:http://www.cnblogs.com/Answer1215/p/4559639.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!