如何从商店sencha touch给动态轴最小值和最大值到图表

时间:2013-07-24 20:07:17

标签: extjs sencha-touch sencha-touch-2 sencha-touch-2.1

我正在使用xtype:chart,这是我的轴。

   axes: [{
      type: 'numeric',
      minimum: 0,
      position: 'left',
      fields: ['2011', '2012', '2013'],
      title: 'Sales',
      minorTickSteps: 1,
      grid: {
              odd: {
                      opacity: 1,
                      fill: '#ddd',
              }
      },
      style: {
              axisLine: false,
              estStepSize: 20,
              stroke: '#ddd',
              'stroke-width': 0.5
      },
      minimum: 0,
      maximum: 1000
  }, {
      type: 'category',
      position: 'bottom',
      fields: ['name'],
      title: 'Month of the Year',
      style: {
              estStepSize: 1,
              stroke: '#999'
      }
 }]

这是我的问题,不同用户之间的最小值和最大值变化很大。如果我为某些用户给出最小-0和最大值10000,则表示不显示...而对于其他一些图表,如果我不显示make 0 -1000,所以我想在加载图表之前更改商店的最小值和最大值。这有可能吗?我请求一个例子。谢谢你

2 个答案:

答案 0 :(得分:6)

无需设置最小值和最大值,因为它将由sencha根据数据

设置

如果你还想这样做,那么可以通过听初始化图表事件来做到这一点

让我们说,这是轴

axes: [{
        type: 'numeric',
        position: 'left',
        fields: ['data1'],
        title: {
            text: 'Sample Values',
            fontSize: 15
        },
        grid: true,
        minimum: 0
    }, {
        type: 'category',
        position: 'bottom',
        fields: ['name'],
        title: {
            text: 'Sample Values',
            fontSize: 15
        }
    }],

初始化监听器

    listeners : {
        initialize : function( me, eOpts ) {
            Ext.getStore('chartstore').load({
                callback: function(records, operation, success) {
                var data = records[0].data;
                 var axes = me.getAxes();
                 var SampleValuesAxis =  axes[0];
                    SampleValuesAxis.setMinimum(data.minimum);
                    SampleValuesAxis.setMaximum(data.maximum);
            },
            scope: this
        });
       }
   }

答案 1 :(得分:1)

如果您没有为minimummaximum设置任何值,Ext会在每次加载商店时将轴调整为数据。