提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

Angular 15 an create as angularjs directive Chart
2023-09-14 08:59:21 时间

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>

 

相关文章