Question

我需要使用时间格式（例如小时：分钟）来格式化我的x轴，但是它的标签需要更加完整，包括年/月/日小时：分钟：秒

有没有办法做到这一点？我为我的xAxis使用了tickFormat选项，但它在我的x轴上显示并标记了相同的信息......

怎么做？我读了一些关于＆＃34; tickValues＆＃34;但无法解决这个问题。

我的代码：

var rangeSelector = document.getElementsByTagName('select')[0]; //1h 24h 1w custom



controllerScope.statusViewChartOptions = {
                chart: {
                    type: 'lineChart',
                    height: 600,
                    staggerLabels: true,
                    margin: {
                        top: 20,
                        right: 20,
                        bottom: 70,
                        left: 30
                    },
                    forceY: [0],
                    x: function (d) {
                        return d.x;
                    },
                    y: function (d) {
                        return d.y;
                    },
                    useInteractiveGuideline: true,
                    duration: 500,
                    noData: 'No data to show in the specified range',
                    xAxis: {
                        axisLabel: 'Hours',
                        axisLabelDistance: 20,
                        showMaxMin: false,
                        tickFormat: function (d) {
                            if(rangeSelector.value == "1h"){
                                return d3.time.format("%H:%M")(new Date(d));
                            } else if(rangeSelector.value == "24h"){
                                return d3.time.format("%H:%M")(new Date(d));
                            } else if(rangeSelector.value == "1w"){
                                return d3.time.format("%d-%m")(new Date(d));
                            } else if(rangeSelector.value=="custom"){                   
                                return d3.time.format("%d %b")(new Date(d));
                            }
                        },
                        rotateLabels: -45
                    },
                    yAxis: {
                        showMaxMin: false,
                        tickFormat: function (d) {
                            return d3.format('d')(d);
                        }
                    },
                    title: {
                        enable: true,
                        text: 'Status'
                    },
                    dispatch: {
                        stateChange: function (e) {
                            console.log("stateChange");
                            $scope.api.refresh();
                        },
                        changeState: function (e) {
                            console.log("changeState");
                            $scope.api.refresh();
                        },
                        tooltipShow: function (e) {
                            console.log("tooltipShow");
                            $scope.api.refresh();
                        },
                        tooltipHide: function (e) {
                            console.log("tooltipHide");
                            $scope.api.refresh();
                        }
                    }
                }
            };


        };

Answer 1

你可以试试这个：

tooltip: {
                keyFormatter: function(d) {
                    return d3.time.format('%x %X')(new Date(d));
                }
            },

从角度NVD3 Github页面中的示例分叉的Plunker：http://plnkr.co/edit/77dOGGKEWJljuvSFPMon?p=preview

D3日期/时间格式可在此处找到：
https://github.com/d3/d3-time-format/blob/master/README.md#timeFormat

Answer 2

tooltip: {
                        contentGenerator: function (e) {
                            //create html
                            var html = "";                  
                            console.log(e.point.x);
                            console.log(e.series[0].key);
                            console.log(e.point.y);
                            var html ="<table><thead><tr><td colspan='3'><strong class='x-value'>"+d3.time.format('%Y-%m-%d %H:%M:%S')(new Date(e.point.x))+"</strong></td></tr></thead><tbody><tr><td class='legend-color-guide'><div style='background-color: rgb(46, 204, 113);'></div></td><td class='key'>"+e.series[0].key+"</td><td class='value'>"+e.point.y+"</td></tr></tbody></table>"; 
                            return html;
                        },
                        hideDelay: 10
                    },

自定义x轴上的标签nvd3折线图angularjs

2 个答案: