nvd3作爲角度服務

Question

我想創建一個SPA，其中每個頁面都有不同的折線圖組。 我已經創建了一個圖形服務。

dashboard.factory('graphService', function() { 

function drawGraph(chart, element, data) { 
    nv.addGraph(function() { 
     chart = nv.models.lineChart() 
      .x(function(d) { return d.x }) 
      .y(function(d) { return d.display ? d.display.y : d.y }); 

     chart.lines.scatter.useVoronoi(false); 

     var xScale = d3.scale.linear() 
      .domain([0, d3.max(data, function(d) { return d[0]; })]); 

     chart.xAxis 
      .axisLabel('Time') 
      .tickFormat(function(d) { 
       return d3.time.format("%m-%d %H:%M:%S")(new Date(d)) 
      }) 
      .scale(xScale) 
      .orient("bottom"); 

     chart.yAxis 
      .axisLabel('Rate') 
      .domain([0, 20]) 
      .tickFormat(d3.format(',r')); 

     d3.select(element) 
      .datum(data) 
      .transition().duration(500) 
      .call(chart); 

     nv.utils.windowResize(chart.update); 

     return chart; 
    }); 
} 

return 
{ 
    drawGraph: drawGraph 
}; 
}); 

然而在第二頁上，我看到的第一頁上的圖或有時我沒有看到

function refreshAcs() { 

    graphService.drawGraph(that.acsChart, '#chartAcs svg', dataService.getAcsData()); 
} 

我怎麼能做到呢？我是否需要添加回調來獲取圖表並每次傳遞它？作爲功​​能是發電機

Answer 1

我有過類似的問題，在同一頁面上繪製多個nvd3圖表（與rails不與Angular），問題是你不能有多個圖表在同一頁面上，除非你將它們全部存儲在一個數組中。請參閱This Stackoverflow question of mine，您可以擴展該邏輯。

我來到這個解決方案，通過查看nvd3.org上的示例頁面，我看到他們在一個數組中有多個圖。但在他們的情況下，他們能夠通過名稱來引用圖表。你只需要動態地做。使用angular的雙向綁定可能會更容易一些。

您將需要在Angular中執行類似的操作，在其中維護服務中的一系列圖表對象。這不應該是一個問題，因爲角度服務是單身人士。

P.S.你有沒有看過使用類似github上的angularjs-nvd3-directives項目？可能已經做了你需要的隔離範圍等。#justathought

祝你好運。

Answer 2

沒有爲nvd3

http://cmaurer.github.io/angularjs-nvd3-directives

角度指令你可以看看它。