1. #1
    Ext JS Premium Member
    Join Date
    Jan 2012
    Posts
    1
    Vote Rating
    0
    takuya ota is on a distinguished road

      0  

    Default 【Ext.chart.Chart】 Axesに「Type:"Time」"を指定して月単位で軸を描画したい

    【Ext.chart.Chart】 Axesに「Type:"Time」"を指定して月単位で軸を描画したい



    バージョンは、ext-4.0.7を使用しています。

    やりたいことは、X軸を時間軸として月初めの間隔でX軸を描画したい。
    ■やりたいことの具体例
    ①X軸「2011/01/01,02/01,03/01・・・」と描画される
    ②プロット点「2011/1/15」の場合、2011/01/01と02/01の間にプロットされる

    以下のコードでグラフを描画した場合、添付ファイルの通りになります。WS000000.jpg
    結果          :「2011/01/01,01/31,03/01・・・」
    期待している結果  :「2011/01/01,02/01,03/01・・・」

    本件について、axes:にStep:[Ext.Date.MONTH,1]を指定してコードを作成しているのですが
    うまくいきません。どうしたらやりたいことを実現できるでしょうか。
    ■コード
    Code:
    Ext.require(['Ext.chart.*']);
    Ext.require(['Ext.data.*']);
    Ext.onReady(function(){ 
    Ext.define('WeatherPoint', { 
    extend: 'Ext.data.Model' 
    ,fields: ['temperature', 'date'] 
    }); 
    var store = Ext.create('Ext.data.Store', { 
    model: 'WeatherPoint' 
    ,data: [ 
    {temperature: 58, date: Ext.util.Format.date(new Date(2011, 1, 2),'Y/m/d')} 
    ,{temperature: 63, date:Ext.util.Format.date(new Date(2011, 3, 3),'Y/m/d')} 
    ,{temperature: 73, date:Ext.util.Format.date(new Date(2011, 4, 4),'Y/m/d')} 
    ,{temperature: 78, date:Ext.util.Format.date(new Date(2011, 5, 5),'Y/m/d')} 
    ,{temperature: 81, date:Ext.util.Format.date(new Date(2011, 6, 6),'Y/m/d')} 
    ] 
    }); 
    Ext.create('Ext.chart.Chart', { 
    renderTo: Ext.getBody() 
    ,width: 1000 
    ,height: 500 
    ,store: store 
    ,axes: [ 
    { 
    title: 'Temperature' 
    ,type: 'Numeric' 
    ,position: 'left' 
    ,fields: ['temperature'] 
    ,mininum: 0 
    ,maximum: 100 
    } 
    ,{ 
    title: 'Time' 
    ,type: 'Time' 
    ,position: 'bottom' 
    ,fields: ['date'] 
    ,groupBy: 'year,month,day' 
    ,dateFormat: 'Y/m/d' 
    ,fromDate:new Date(2010, 12, 1)
    ,toDate:new Date(2011, 12, 1)
    ,step:[Ext.Date.MONTH,1]
    ,label: {
    rotate: {
    degrees: 315
    }
    }
    } 
    ] 
    ,series: [ 
    {
    type: 'line' 
    ,xField: 'date' 
    ,yField: 'temperature',
    markerConfig:{
    type: 'cross',
    size: 4,
    radius: 4,
    'stroke-width': 0
    }
    }
    ] 
    }); 
    });
    Last edited by dawesi; 4 Dec 2012 at 9:28 PM. Reason: バージョン記載漏れ