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

我需要格式化我的x轴时间格式，如小时：分钟，但它的标签需要更加完整，包括年/月/日小时：分：秒x轴自定义标签nvd3折线图angularjs

有没有办法做到这一点？我为我的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(); 
         } 
        } 
       } 
      }; 


     };

来源

2017-10-16 André Bastos

难道你试试这个：

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

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

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

来源

2017-10-16 16:59:14

这工作时，我只有一条线..我有两条线，无法找到一种方法来创建这两种情况...明白吗？ –

你的意思是你有多个图表的累积图表？你可以分享代码吗？你上面给出的例子显示了一个单线图。 –

我有一个线条图，两个线，一个用于在线，另一个用于离线 –

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

来源

2017-10-17 16:44:42

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

回答

相关问题