nvD3, AngularJs D3 | 易学教程

问题

All --, Can any one help me to resolve the following, I am not getting where I am going wrong? My JSP page is as follows :

       <html>
        <head>
          <meta charset="utf-8">  <!-- it's important for d3.js -->
        <title><bean:message key="welcome.title" /> Dashboard</title>

        <script type="text/javascript" src="/js/angular.min.js"></script>
        <script type="text/javascript" src="/js/d3.min.js"></script>
        <script type="text/javascript" src="/js/nv.d3.min.js"></script> <!-- or use another assembly -->
        <script type="text/javascript" src="/js/angular-nvd3.js"></script>
          <script type="text/javascript" src="/js/stackedAreaChart.js"></script>

        <link rel="stylesheet" href="css/nv.d3.min.css"> 

        </HEAD>
        <body>
            <div ng-app='myApp'>
            <div ng-controller='myCtrl'>
                <nvd3 options='options' data='data'></nvd3>
            </div>   
            </div>  
        </body>
        </html>

The above code displaying the stacked Area chart correctly. Then I have replaced the above code with the following:

<html>
    <head>
      <meta charset="utf-8">  <!-- it's important for d3.js -->
    <title><bean:message key="welcome.title" /> Dashboard</title>

    <script type="text/javascript" src="/js/angular.min.js"></script>
    <script type="text/javascript" src="/js/d3.min.js"></script>
    <script type="text/javascript" src="/js/nv.d3.min.js"></script> <!-- or use another assembly -->
    <script type="text/javascript" src="/js/angular-nvd3.js"></script>
      <script type="text/javascript" src="/js/stackedAreaChart.js"></script>     
    <link rel="stylesheet" href="css/nv.d3.min.css">     
    </HEAD>
    <body>
       <input type="button" value="Add Chart" onclick="addChart()" /> 
       <div id='myNew'>     
       </div>


    </body>
  <script type="text/javascript">
  function addChart() {
        alert("add Chart");    
    document.getElementById('myNew').innerHTML =  '<div ng-app="myApp" >' +
        ' <div ng-controller="myCtrl">' +
' <nvd3 options="options" data="data"></nvd3> '+
' </div> ' +
' </div> ';

}
</script>
</html>

When I click 'Add Chart' button it should display the chart but nothing is getting displayed. Only blank page is appearing. Can any one help me how to make this to work?

I have included the stackedAreaChart.js as it is from http://krispo.github.io/angular-nvd3/js/stackedAreaChart.js

回答1:

You should use $compile service in your controller to compile the directive template with current $scope:

//javascript
$scope.onclickCreate = function(){
    var template = '<nvd3 options="options" data="data"></nvd3>';
    angular.element(document.body).append($compile(template)($scope));
}

and chart will be created in the html body after click:

//html
<button ng-click="onclickCreate()">Create chart</button>

See live example.

来源：https://stackoverflow.com/questions/23828655/nvd3-angularjs-d3

标签

angularjs

d3.js

nvd3.js