nvD3，AngularJs D3答案

【问题标题】：nvD3, AngularJs D3nvD3，AngularJs D3
【发布时间】：2014-05-23 11:59:25
【问题描述】：

所有--，任何人都可以帮助我解决以下问题，我没有得到哪里出错了吗？我的 JSP 页面如下：

       <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>

上面的代码正确显示了堆积面积图。然后我已经更换了上面的代码如下：

<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>

当我单击“添加图表”按钮时，它应该显示图表，但没有显示任何内容。只出现空白页。任何人都可以帮助我如何使它工作吗？

我已经包含了来自http://krispo.github.io/angular-nvd3/js/stackedAreaChart.js的stackedAreaChart.js

【问题讨论】：

因为您的addChart 函数不在角度控制器中，因此角度不知道它并且在单击时无法触发摘要循环。由于图表是一个指令，它显然需要意识到范围的变化才能正确响应。
感谢安迪的回复，并对我迟到的回复感到抱歉。由于我对 Angular JS 和 D3 比较陌生，仍然对应用您的解决方案感到困惑。您能否修改上述代码以使其正常工作？提前致谢。

标签： angularjs d3.js nvd3.js

【解决方案1】：

你应该在你的控制器中使用$compile服务来编译带有当前$scope的指令模板：

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

点击后会在html body中创建图表：

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

观看直播example。

【讨论】：

感谢 krispo，它运行良好。我已将您的示例替换为jsfiddle.net/madasuk/pTGPN 的数据和图表类型以键入：'lineChart'。但是图形线变得混乱，并且 y 轴无法正确显示其刻度。你能帮我解决这个问题吗？非常感谢。
您的示例不起作用，但正如我所见，您应该对数据进行排序，因为我们处理的是时间序列。在您的情况下，可以这样做：angular.forEach($scope.data, function(series, index){ series.values.sort(function(a,b){ return a[0]-b[0]; }); });。使用您的数据查看example。
感谢 Krispo，我正在尝试使用 ng-click = onClickCreate() 修改您的代码示例。我已经替换了 $scope.data = getData()，其中 getData() 使用 Ajax 调用带来了 json 数据，一切正常。现在我添加了一个下拉列表 ***
已解决，我这里更新了例子plnkr.co/edit/017pqbv1YVtB5G9TBvd3?p=preview