2016-05-02 9 views
0

I erzeugen eine nvd3 Graph mit dem Winkel nvd3 Richtlinie:Filtern nach Bereichsdatum für angular-nvd3 Direktive?

<nvd3 id="analytics-community" options="vm.community.options" data="vm.community.data" config="vm.graphConfig" class="with-3d-shadow with-transitions"></nvd3> 

Jedoch ist es nicht möglich scheint, die Daten zu filtern Attribut |filter:something wie es unendlich und Winkelpausen mit Endlosschleife Fehler Looping endet.

Grafikoptionen sind Setup mit:

vm.graphOptions = { 
    chart: { 
     type: 'lineChart', 
     height: 300, 
     margin : { 
      top: 50, 
      right: 50, 
      bottom: 50, 
      left: 50 
     }, 
     x: function(d) { 
      return d3.time.format.iso.parse(d.key); 
     }, 
     y: function(d) { 
      return d.value; 
     }, 
     useInteractiveGuideline: false, 
     dispatch: { 
      stateChange: function(e) { }, 
      changeState: function(e) { }, 
      tooltipShow: function(e) { }, 
      tooltipHide: function(e) { } 
     }, 
     xScale: d3.time.scale(), 
     xAxis: { 
      axisLabel: 'Date', 
      tickFormat: function (d) { 
       return d3.time.format('%b %Y')(new Date(d)); 
      } 
     }, 
     yAxis: { 
      axisLabel: 'Count', 
      tickFormat: function(d) { 
       return d; 
      } 
     } 
    } 
}; 

und die Daten-Setup mit:

vm.community.data = [ 
    { 
     key: 'Members', 
     values: vm.statsModel.registeredMembers 
    }, 
    { 
     key: 'Students', 
     values: vm.statsModel.registeredStudents 
    }, 
    { 
     key: 'Alumni', 
     values: vm.statsModel.registeredAlumni 
    } 
]; 

Wo vm.statsModel.registeredMembers wie ist:

[ 
    { 
    key: "2015-06-15", 
    value: 458 
    }, 
    { 
    key: "2015-06-23", 
    value: 459 
    }, 
    { 
    key: "2015-06-27", 
    value: 460 
    } 
] 

Beliebig Ideen?

Antwort

0

die xDomain in vm.graphOptions.chart Einstellung gearbeitet:

vm.graphOptions.chart.xDomain = [new Date(vm.selectedItem.date), dateToday] 

Wo vm.selectedItem.date = new Date().setMonth(new Date().getMonth() - 6) für 6 Monate ... und dateToday = new Date()

Also, die ich beobachte nur $ für Änderungen auf vm.selectedItem ändert mit einem Auswahlfeld und aktualisieren xDomain.