nvd3 AngularJS Datumsformat Ausgabe - nicht-Epoche

Question

Ich verwende nvd3 Diagramm in AngularJS. Ich erhalte die Daten wie eine Serie von [{"01.09.2015", 5}, ...]. d.h. [{mm/tt/jjjj, dezimal}]. Nach dem Überprüfen des NVD3-Tutorials sieht es aus, als müsste das Datum im Epoch-Format sein, was für meinen Fall nicht möglich ist. Ich sehe keine Referenz dafür. Wie kann ein Liniendiagramm mit Y-Achse einige Dezimalwerte und X-Achse Monat-Jahr oder vollständiges Datum ohne Konvertierung in Epoch-Format machen.

Jede Referenz oder Tutorial wäre auch eine große Hilfe. Vielen Dank im Voraus ...

Mein Code:

var appCntrl = angular.module("AppCntrl",['nvd3']); 

appCntrl.controller("QPBDController", function($scope){ 
    $scope.score = { 
     "data":[7.97,8.93,6.53,4.87,4.98,4.56], 
     "term":["09/01/2015","10/01/2015","11/01/2015","12/01/2015","01/01/2016","02/01/2016"] 
    }; 

    $scope.options = { 
     chart: { 
      type: 'lineChart', 
      height: 450, 
      margin : { 
       top: 20, 
       right: 20, 
       bottom: 40, 
       left: 55 
      }, 
      x: function(d){ return d.x; }, 
      y: function(d){ return d.y; }, 
      useInteractiveGuideline: true, 
      dispatch: { 
       stateChange: function(e){ console.log("stateChange"); }, 
       changeState: function(e){ console.log("changeState"); }, 
       tooltipShow: function(e){ console.log("tooltipShow"); }, 
       tooltipHide: function(e){ console.log("tooltipHide"); } 
      }, 
      xAxis: { 
       tickFormat: function(d) {return d3.time.format("%b %d, %Y")(d);} 
      }, 
      yAxis: { 
       axisLabel: 'Voltage (v)', 
       tickFormat: function(d){ 
        return d3.format('.02f')(d); 
       }, 
       axisLabelDistance: -10 
      }, 
      callback: function(chart){ 
       console.log("!!! lineChart callback !!!"); 
      } 
     }, 
     title: { 
      enable: true, 
      text: 'Title for Line Chart' 
     }, 
     subtitle: { 
      enable: true, 
      text: 'Subtitle for simple line chart.', 
      css: { 
       'text-align': 'center', 
       'margin': '10px 13px 0px 7px' 
      } 
     }, 
     caption: { 
      enable: true, 
      html: '<b>Figure 1.</b> .', 
      css: { 
       'text-align': 'justify', 
       'margin': '10px 13px 0px 7px' 
      } 
     } 
    }; 

    $scope.data = sinAndCos(); 

    var str = ["s"]; 
    /*Random Data Generator */ 
    function sinAndCos() { 
     var sin = [],sin2 = [], 
      cos = []; 

     //Data is represented as an array of {x,y} pairs. 
     for (var i = 0; i < $scope.score.term.length; i++) { 
      sin.push({x: $scope.score.term[i], y: $scope.score.data[i]}); 
      sin2.push({x: $scope.score.term[i], y: $scope.score.data[i]}); 
      cos.push({x: $scope.score.term[i], y: $scope.score.data[i]}); 
     } 
console.log(sin); 
     //Line chart data should be sent as an array of series objects. 
     return [ 
      { 
       values: sin,  //values - represents the array of {x,y} data points 
       key: 'Sine Wave', //key - the name of the series. 
       color: '#ff7f0e', //color - optional: choose your own line color. 
       strokeWidth: 2, 
       classed: 'dashed' 
      }, 
      { 
       values: cos, 
       key: 'Cosine Wave', 
       color: '#2ca02c' 
      }, 
      { 
       values: sin2, 
       key: 'Another sine wave', 
       color: '#7777ff', 
       area: true  //area - set to true if you want this line to turn into a filled area chart. 
      } 
     ]; 
    }; 
}); 

index.html:

<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="css/app.css" rel="stylesheet"> 
    <script src="node_modules/angular/angular.min.js"></script> 
    <script src="node_modules/angular-ui-router/release/angular-ui-router.min.js"></script> 
    <script src="node_modules/d3/d3.min.js"></script> 
    <script src="node_modules/nvd3/build/nv.d3.min.js"></script> 
    <script src="node_modules/angular-nvd3/dist/angular-nvd3.min.js"></script> 
    <link href="node_modules/nvd3/build/nv.d3.min.css" rel="stylesheet"> 
    <script src="bizkpi.js"></script> 
    <script src="js/controllers.js"></script> 

<nvd3 options="options" data="data"></nvd3> 

Der obige Code einen Fehler in der Konsole wie unten und es kommt nichts in GUI up zeigt

TypeError: n.getMonth is not a function 
    at Yn.A.b (d3.min.js:1) 
    at t (d3.min.js:1) 
    at SVGTextElement.$scope.options.chart.xAxis.tickFormat (controllers.js:29) 
    at SVGTextElement.arguments.length.each.function.n.textContent (d3.min.js:3) 
    at d3.min.js:3 
    at Y (d3.min.js:1) 
    at Array.Co.each (d3.min.js:3) 
    at Array.Co.text (d3.min.js:3) 
    at SVGGElement.<anonymous> (d3.min.js:5) 

Answer 1

müssen Sie das Datum wie folgt formatieren:

vm.chart.options.chart.xAxis.tickFormat = function(d) {return d3.time.format("%b %d, %Y")(d);}; 

in Ihrem options.chart sollten Sie haben:

 lines: { 
     xScale: d3.time.scale(), 
     }, 

Ich denke, Sie sollten die Zecken und tickvalues ​​als auch zum Beispiel festgelegt ..

vm.chart.options.chart.xAxis.ticks = d3.time.monday; 
    vm.chart.options.chart.xAxis.tickValues = function(d) {return d3.time.monday.range(from, to, 2);}; 
    };