Question

我在AngularJS中使用nvd3图表。我收到的数据类似于[{＆＃34; 09/01 / 2015＆＃34;，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：

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

上面的代码在控制台中显示错误，如下所示，GUI中没有任何内容

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(),
      },

我认为你应该设置ticks和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);};
  };

nvd3 AngularJS日期格式问题 - 非纪元

1 个答案: