2010-10-01 4 views
2

Note: Ceci est un poste croix: extjsForuml'labelRenderer de l'axe du temps dans ExtJS

depuis que je suis pas de réponse là-bas, donc je demande ici.

Toute personne qui décide de répondre à ce message peut d'abord consulter le forum pour s'assurer que la question a été répondue. :)

Ce qui suit est mon code de base pour faire un graphique à colonnes pour montrer les visiteurs et les octets de mon site Web, mais j'ai trouvé que je ne peux pas gérer l'étiquette du xAxis.

 visitAndBytesStore = new Ext.data.JsonStore(
     { 
      fields : 
      [ 
      { 
       name : 'time', 
       type : 'string' 
//    dateFormat : 'Y-m-d H:i:s' 
        }, 'visits', 'bytes' ] 
     }); 


     var visitAndBytesData = 
     [{"time" : "2010-09-17 16:24:06","visits" : "23","bytes" : "4545"}, 
     {"time" : "2010-09-17 02:23:33","visits" : "3233","bytes" : "3232"}, 
     {"time" : "2010-09-17 16:23:52","visits" : "456","bytes" : "3242342"}, 
     {"time" : "2010-09-17 15:23:52","visits" : "6456","bytes" : "2314252"} ]; 


     visitAndByteChart = new Ext.chart.ColumnChart(
     { 
      store : visitAndBytesStore, 
      xField : 'time', 
      // xAxis : new Ext.chart.TimeAxis(
      // { 
      // title : 'time', 
      // displayName : 'time', 
      // labelRenderer : function(dd) 
      // { 
      // // return dd.format("m-d")+"\n"+dd.format("H:i"); 
      // return ""; 
      // } 
      // }), 
      yAxis : new Ext.chart.NumericAxis(
      { 
       displayName : 'Visits', 
       labelRenderer : Ext.util.Format.numberRenderer('0,0') 
      }), 
      series : 
      [ 
      { 
       type : 'column', 
       displayName : 'Bytes', 
       yField : 'bytes', 
       style : 
       { 
        color : 0x99BBE8 
       } 
      }, 
      { 
       type : 'line', 
       displayName : 'Visits', 
       yField : 'visits', 
       style : 
       { 
        mode : 'stretch', 
        color : 0x15428B 
       } 
      } ] 
     }); 

     visitorAndBytesChartPanel = new Ext.Panel(
     { 
      iconCls : 'chart', 
      title : '&nbsp', 
      frame : true, 
      renderTo : 'bytes', 
      autoWidth : true, 
      height : 300, 
      layout : 'fit', 
      items : visitAndByteChart 

     }); 

Comme indiqué ci-dessus si j'utilise le format « chaîne » du champ « temps », je ne peux pas gérer le format de l'étiquette de temps dans le tableau, leur valeur sont trop longs (2010-09-20 23:00:00 est trop long), ils sont donc affichés automatiquement.

Ceci est le résultat: http://awesomescreenshot.com/0e41vu0c0

Je veux tous les afficher.

Donc, je mets le champ "heure" à "date" (Il suffit de supprimer les commentaires dans les codes ci-dessus), Et maintenant la dernière étiquette dans le tableau ne peut pas afficher complètement, ainsi est le "point" dans le tableau qui déclenche l'événement tip.

Ceci est le résultat: http://awesomescreenshot.com/04c1vtq94

Y at-il des problèmes?

Répondre

0
extraStyle: { 
    padding: 20 
} 

Du Forum