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 に答える