2013-03-19 38 views
1

假设我想要在Ext.js条形图中显示一些数据,并且希望我的数据绕y轴自定义值“1.0”旋转(与传统的“0.0”相比)。Ext.js图表​​系列和轴

意思是,下面的图片有负值表示反转条,我想低于“1.0”的值在图表上显示为反转条。

enter image description here

有没有办法,我可以设置为达致这一个设置?如果是这样,它会在系列和轴定义?也许图表本身?

所显示的图表的代码如下:

Ext.require('Ext.chart.*'); 
Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit', 'Ext.window.MessageBox']); 

Ext.define('CPI', { 
    extend: 'Ext.data.Model', 
    fields: [{ 
     name: 'ReportingPeriod', 
     type: 'string' 
    }, { 
     name: 'CPI_P', 
     type: 'decimal' 
    }, { 
     name: 'CPI_C', 
     type: 'decimal' 
    }] 
}); 

var store1 = Ext.create('Ext.data.Store', { 
    model: 'CPI', 
    data: [{ 
     ReportingPeriod: 'Period1', 
     CPI_P: '1.9', 
     CPI_C: '1.2' 
    }, { 
     ReportingPeriod: 'Period2', 
     CPI_P: '1.2', 
     CPI_C: '1.1' 
    }, { 
     ReportingPeriod: 'Period3', 
     CPI_P: '0.1', 
     CPI_C: '0.5' 
    }, { 
     ReportingPeriod: 'Period4', 
     CPI_P: '-0.5', 
     CPI_C: '0.6' 
    }, { 
     ReportingPeriod: 'Period5', 
     CPI_P: '-0.9', 
     CPI_C: '0.8' 
    }, { 
     ReportingPeriod: 'Period6', 
     CPI_P: '-1.0', 
     CPI_C: '-0.6' 
    }, { 
     ReportingPeriod: 'Period7', 
     CPI_P: '-1.1', 
     CPI_C: '-0.7' 
    }, { 
     ReportingPeriod: 'Period8', 
     CPI_P: '-1.5', 
     CPI_C: '-0.8' 
    }] 
}); 

var chart = Ext.create('Ext.chart.Chart', { 
    style: 'background:#fff', 
    animate: true, 
    theme: 'Category1', 
    store: store1, 
    width: 300, 
    height: 300, 
    renderTo: 'chart', 
    axes: [{ 
     type: 'Numeric', 
     position: 'left', 
     fields: ['CPI_P', 'CPI_C'], 
     title: 'CPI', 
     grid: true 
    }, { 
     type: 'Category', 
     position: 'bottom', 
     fields: ['ReportingPeriod'], 
     title: 'Reporting Period' 
    }], 
    series: [{ 
     type: 'column', 
     axis: 'left', 
     xField: 'ReportingPeriod', 
     yField: 'CPI_P', 
     markerConfig: { 
      type: 'cross', 
      size: 3 
     }, 
     renderer: function(sprite, record, attr, index, store) { 

       var value = (record.get('CPI_P') >> 2) % 2; 
       var color = ['rgb(213, 70, 121)', 
          'rgb(44, 153, 201)' 
          ][value]; 
       return Ext.apply(attr, { 
        fill: color 
       }); 
      } 
    }] 
}); 

chart.show(); 

UPDATE

如果我添加最小,以y轴我更接近(排序的)

... 
axes: [{ 
     type: 'Numeric', 
     position: 'left', 
     fields: ['CPI_P', 'CPI_C'], 
     title: 'CPI', 
     grid: true, 
     minimum: 1, 
    }.... 

enter image description here

It's th一个正确的想法,因为酒吧现在与数字1相关,但我显然需要保持图上的酒吧。

回答

0

看来工作似乎是从我的数据中减去1并将1加到标签上。

axes: [{ 
      type: 'Numeric', 
      position: 'left', 
      grid: true, 
      maximum: 1.0, //will render to 2.0 
      fields: ['PeriodAmount', 'CumulativeAmount'], 
      label:{ 
       renderer:function(v){ 
        return (v+1).toFixed(2); 
       } 
      }   
     }...] 

enter image description here

这是一个可行的解决办法我,但我不认为这是一个优雅的答案,因为它不是为自定义值配置性非常高。例如,将此更改为-1或2需要更多的工作,而不仅仅是更改简单的设置。