nvd3 AngularJS日付形式の問題 - 非エポック

Question

私はAngularJSでnvd3チャートを使用しています。私は一連の[{"09/01/2015"、5}、...]のようなデータを取得しています。すなわち、[{mm/dd/yyyy、decimal}]。 NVD3チュートリアルをチェックした後、日付はエポック形式にする必要がありますが、私の場合は不可能です。私はそれについての参照を参照してください。エポック形式に変換せずに、Y軸に小数点以下の値とX軸の月または年を含む折れ線グラフを作成する方法

任意の参照やチュートリアルも大きな助けになります。事前のおかげで...

マイコード：

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：上記のコードは以下のようにコンソールにエラーが表示され、何も

GUIにまで来ない

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

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

次のように日付をフォーマットする必要があります。

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

あなたが持っている必要がありますあなたのoptions.chartで

：

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

を、私はあなたが、たとえば、同様ティックとtickValuesを設定すべきだと思う。..

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);}; 
    };