2010-10-01 92 views
2

注將爲labelRenderer: 這是一個跨崗位:extjsForum時間軸的ExtJS的

,因爲我沒有答案,所以我在這裏問。

任何決定回覆此帖子的人都可以首先查看論壇,以確定問題是否已被回答。 :)

以下是我的核心代碼來製作一個柱形圖來顯示我的網站的訪問者和字節,但是我發現我無法處理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 

     }); 

如以上那樣,如果使用「時間」字段中的「串」格式,我不能處理的圖中的時間標籤的格式,其值是太長(2010-09-20 23:00:00太長),所以它們通過自動選擇來顯示。

這是結果: http://awesomescreenshot.com/0e41vu0c0

我希望將他們都顯示出來。

因此,我將「時間」字段設置爲「日期」(只刪除上述代碼中的註釋), 現在圖表中的最後一個標籤不能完全顯示,圖表中的「點」也是如此這觸發了提示事件。

這是結果: http://awesomescreenshot.com/04c1vtq94

有什麼問題呢?

回答

0
extraStyle: { 
    padding: 20 
} 

從論壇