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

이 시도 할 수 : http://plnkr.co/edit/77dOGGKEWJljuvSFPMon?p=preview이

D3의 날짜/시간 형식이 될 수 있습니다

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

Plunker는 각 NVD3 Github에서 페이지의 예제에서 포크 여기에 있습니다 :
https://github.com/d3/d3-time-format/blob/master/README.md#timeFormat

출처

2017-10-16 16:59:14

이것은 한 줄 밖에없는 경우에 효과가 있습니다. 두 줄과 캔트 두 가지 경우 모두를 만들 수있는 방법을 그림으로 나타냅니다 ... 이해합니까? –

누적 차트에 여러 개의 그래프가 있음을 의미합니까? 코드를 공유 할 수 있습니까? 위에 제시 한 예는 단일 선 차트를 보여줍니다. –

온라인과 오프라인 용 라인 차트 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 
        },

출처

2017-10-17 16:44:42

x 축에 레이블 사용자 지정 nvd3 선형 차트 angularjs

답변

관련 문제