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

【问题标题】：Customize label on x axis nvd3 line chart angularjs自定义x轴nvd3折线图angularjs上的标签
【发布时间】：2017-10-16 15:05:24
【问题描述】：

我需要使用像小时：分钟这样的时间格式来格式化我的 x 轴，但它的标签需要更完整的年/月/日小时：分钟：秒

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

如何做到这一点？我读过一些关于“tickValues”的内容，但无法弄清楚。

我的代码：

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


        };

【问题讨论】：

标签： javascript angularjs d3.js nvd3.js

【解决方案1】：

你可以试试这个：

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

Plunker 来自 Angular NVD3 Github 页面中的示例：http://plnkr.co/edit/77dOGGKEWJljuvSFPMon?p=preview

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

【讨论】：

这在我只有一行的情况下有效。我有两行但无法为这两种情况创建一个方法...明白吗？
你的意思是你有一个包含多个图表的累积图表？你能分享一下代码吗？您在上面给出的示例显示了单个折线图。
我有一个折线图，有两条线，一条在线，一条离线
我尝试了你的代码，但没有任何反应。仍然根据 xAxis 标签显示我的图表和工具提示
请创建一个 plunker 来展示你想要做什么。

【解决方案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
                    },

【讨论】：