angularjs nvd3 multibar chart xAxis tick not showing

為{幸葍}努か 提交于 2019-12-11 06:37:16

问题


  1. I'm using angularjs nvd3 multibar chart
  2. chart xAxis tick do not show like below.

  3. I want to show all xAxis tick formed %Y/%m/%d %H:%M

This is my code.

  this.$scope.options = {                                                                                            
    chart: {                                                                                                       
       type: 'multiBarChart',                                                                                      
       height: 450,                                                                                                
       margin : {                                                                                                  
          top: 20,                                                                                                 
          right: 20,                                                                                               
          bottom: 60,                                                                                              
          left: 65                                                                                                 
       },                                                                                                          

       x: function(d){ return d[0]; },                                                                             
       y: function(d){ return d[1]; },                                                                             

       color: d3.scale.category10().range(),                                                                       
       duration: 300,                                                                                              
       stacked: true,                                                                                              
       clipEdge: true,                                                                                             
       clipVoronoi: false,                                                                                         

       xAxis: {                                                                                                    
          axisLabel: 'Time',                                                                                       
          tickFormat: function(d) {                                                                                
             let formedDate = d3.time.format('%Y/%m/%d %H:%M')(new Date(d));                                       
             return formedDate                                                                                     
          },                                                                                                       
          showMaxMin: false,                                                                                       
          staggerLabels: true                                                                                      
       },                                                                                                          

       yAxis: {                                                                                                    
          axisLabel: 'Data',                                                                                       
          axisLabelDistance: -20,                                                                                  
          tickFormat: function(d){                                                                                 
             return d3.format()(d);                                                                                
          }                                                                                                        
       }                                                                                                           
       }                                                                                                               
    };                                                                                                                 

please help me.


回答1:


try to add the following priorities in your chart object

chart = {
   ...  
   reduceXTicks:false,
   ...
   xAxis : {
      .tickFormat: "%Y/%m/%d %H:%M"
   }
}


来源:https://stackoverflow.com/questions/40882662/angularjs-nvd3-multibar-chart-xaxis-tick-not-showing

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!