1

私はこのことにこだわっています。私がやりたいのは、煎茶チャートの各バーに異なる色を付けることです。これは私がこれまでに持っているものです： ここに画像の説明を入力してください そしてこれはそれのための私のコードです：

Ext.setup({
    tabletStartupScreen: 'tablet_startup.jpg',
    phoneStartupScreen: 'phone_startup.jpg',
    tabletIcon: 'icon-ipad.png',
    phoneIcon: 'icon-iphone.png',
    glossOnIcon: false,
    onReady: function() {
    Ext.regModel('Retail', {
        fields: [
        {name: 'id', type: 'string'},
        {name: 'quantity',  type: 'int'}
        ]
    });

   var retailStore =  new Ext.data.JsonStore({
        model: 'Retail',
        proxy: {
            type: 'ajax',
            url: 'getData.php',
            reader: {
                type: 'json',
            }
        },
        autoLoad: true
   });


   console.log(retailStore);


    new Ext.chart.Panel({
        id: 'chartCmp',
        title: 'Stock Example',
        fullscreen: true,
        dockedItems: {
            xtype: 'button',
            iconCls: 'shuffle',
            iconMask: true,
            ui: 'plain',
            dock: 'left'
        },
        items: {
            cls: 'stock1',
            theme: 'Demo',
            legend: {
                position: {
                    portrait: 'right',
                    landscape: 'top'
                },
                labelFont: '17px Arial'
            },
            interactions: [{
                type: 'panzoom',
                axes: {
                    left: {
                        maxZoom: 2
                    },
                    bottom: {
                        maxZoom: 4
                    }
                }
            }],
            animate: false,
            store: retailStore,
            axes: [{
                type: 'Numeric',
                position: 'bottom',
                fields: ['quantity'],
                title: 'Quantity'
            }, {
                type: 'Category',
                position: 'left',
                fields: ['id'],
                title: 'Products'
            }],
            series: [{
                type: 'bar',
                axis: 'right',
                xField: 'id',
                yField: ['quantity'],
            }]
        }
    });
}});

http://dev.sencha.com/deploy/touch-charts-1.0.0/examples/で行われているように、グラフにディメンションを追加してグラフを「ごまかす」方法があるはずです。 バー/

そこには毎年新製品があります。私も同じことをしたいと思います。それぞれの製品は異なる次元を表しています。

4

1 に答える 1

1

シリーズのレンダラー機能が使えます。attributes.fill各バーに必要な色に変更するだけです。ここに例があります: http://bl.ocks.org/3511876とコード:

Ext.setup({
    onReady: function() {
        var data = [];

        for (var i = 0; i < 10; i++) {
            data.push({
                x: i,
                y: parseInt(Math.random() * 100)
            });
        }

        var colors = ['blue', 'yellow', 'red', 'green', 'gray'];

        var store = new Ext.data.JsonStore({
            fields: ['x', 'y'],
            data: data
        });

        var chart = new Ext.chart.Chart({
            store: store,
            axes: [{
                type: 'Category',
                fields: ['x'],
                position: 'left'
            }, {
                type: 'Numeric',
                fields: ['y'],
                position: 'bottom'
            }],
            series: [{
                type: 'bar',
                xField: 'x',
                yField: 'y',
                axis: 'bottom',
                renderer: function(sprite, record, attributes, index, store) {
                    attributes.fill = colors[index%colors.length];

                    return attributes;
                }
            }]
        });

        new Ext.chart.Panel({
            fullscreen: true,
            chart: chart
        });

        chart.redraw();
    }
});
于 2012-08-29T12:47:02.877 に答える