Question

我尝试使用nvd3在我的角应用中显示图表。我收到的日期格式为2015-12-01T00：00：00。当我尝试将其格式化以便在x轴上显示时，我总是会收到1970年1月1日的GMT偏移量。以下是我的图表选项。 tickFormat传递的值来自哪里或者我做错了什么。

vm.options = {
    chart: {
        type: 'historicalBarChart',
        height: 450,
        margin : {
            top: 20,
            right: 20,
            bottom: 65,
            left: 50
        },
        x: function (d) {
            return new Date(d.date).getTime();
        },
        y: function(d) {
            return d.data;
        },
        showValues: true,
        valueFormat: function(d){
            return d3.format(',.1f')(d);
        },
        duration: 100,
        xAxis: {
            axisLabel: 'X Axis',
            tickFormat: function(d) {
                return d3.time.format('%b %y')(new Date(d));
            },
            rotateLabels: 30,
            showMaxMin: false
        },
        yAxis: {
            axisLabel: 'Y Axis',
            axisLabelDistance: -10,
            tickFormat: function(d){
                return d3.format(',.1f')(d);
            }
        },
        tooltip: {
            keyFormatter: function(d) {
                return d3.time.format('%x')(new Date(d));
            }
        },
        zoom: {
            enabled: true,
            scaleExtent: [1, 10],
            useFixedDomain: false,
            useNiceScale: false,
            horizontalOff: false,
            verticalOff: true,
            unzoomEventType: 'dblclick.zoom'
        }
    }
};

我的数据如下所示。

[
    {
        data: 4.3722
        date: "2015-01-01T00:00:00"
    },
    {
        data: 5.111
        date: "2015-02-01T00:00:00"
    },
    {
        data: 4.5758
        date: "2015-03-01T00:00:00"
    },
    {
        data: 4.9875
        date: "2015-04-01T00:00:00"
    }
]

其他信息 当我的角度服务返回数据时，似乎有一些我没有设置的东西。如果我硬编码vm.data中的数据，图表看起来很好，但是当我切换到从我的服务接收数据时，所有日期都是Dec 69.下面是我对服务的调用以及我的数据对象。

vm.averageZone = [];
var request = new requestObject();
shipmentService.getBasicChartData(request)
    .then(function(result) {
        vm.averageZone = result.data;
        //vm.data = [
        //    {
        //        "key": "Average",
        //        "bar": true,
        //        "values": vm.averageZone
        //    }
        //];
    });

vm.data = [
    {
        "key" : "Average" ,
        "bar": true,
        "values" : vm.averageZone
    }];

我的数据是否缺少某些内容以及从服务返回时应该如何设置？

解决方案 以下是最终的工作。我删除了下面的vm.data。

vm.averageZone = [];
var request = new requestObject();
shipmentService.getBasicChartData(request)
    .then(function(result) {
        vm.averageZone = result.data;
        vm.data = [
            {
                "key": "Average",
                "bar": true,
                "values": vm.averageZone
            }
        ];
    });

Answer 1

您无需加入xScale : d3.time.scale()。

您的x值返回一个数值：new Date(d.date).getTime();，而d3.time.scale()函数需要一个JavaScript Date对象。

此图应该可以正常使用线性刻度，因为您将时间数据表示为自1970年1月1日00:00:00 UTC以来的毫秒数。日期格式的转换发生在tickFormat函数中。

NVD3日期值不正确

1 个答案: