2013-03-19 63 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需要更多的工作,而不僅僅是更改簡單的設置。