Ext.js图表​​系列和轴

Question

假设我有一些数据要显示在Ext.js条形图上，我希望我的数据围绕自定义值，例如“1.0”，在y轴上（相对于传统的“0.0”） 。

意思是，下图中的负值用倒条表示，我希望小于“1.0”的值在图表上显示为倒条。

我可以设置一个设置来实现这个目的吗？如果是这样，它会在系列和轴定义中吗？也许图表本身？

显示的图表代码如下：

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();

更新

如果我向y轴添加一个最小值，我会更接近（某种程度）

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

这是正确的想法，因为条形现在与数字1相关，但我显然需要在条形图上保留条形。

Answer 1

似乎有效的是从我的数据中减去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);
                }
            }         
        }...]

这对我来说是一个可行的工作，但我不认为这是一个优雅的答案，因为它不是可配置的自定义值。例如，将此更改为-1或2需要更多工作，而不仅仅是更改简单设置。