1

假设我有一些数据要显示在 Ext.js 条形图上，并且我希望我的数据围绕自定义值旋转，例如，y 轴上的“1.0”（相对于传统的“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 相关，但我显然需要将条形保留在图表上。

4

1 回答 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);
                }
            }         
        }...]

在此处输入图像描述

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

于 2013-03-22T17:18:09.387 回答