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

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>
复制代码

 

posted @   Zhentiw  阅读(697)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示