ExtJS5图表-扩展笛卡尔图表

Question

下面有两个例子(A和B)。第一个是A，工作正常，但图表是由容器管理的。我觉得这是没有必要的。我想直接扩展Cartesian图表，而不是将其添加到Container中。在第二个示例B中，我曾尝试过这样做，但没有成功。

示例A

这个例子运行得很好。它是从Sencha's ExtJS5 Multi-axis column chart example of their kitchen sink派生的。

Demo @ JSFiddle

var climateData = getClimateData();

Ext.define('ChartApp.mixins.reader.DynamicReaderMixin', {
    extend : 'Ext.Mixin',

    readRecords : function(data) {
        var me = this;
        var rootData = data;
        console.log(data);        

        this.callParent(arguments);
    }
});

Ext.define('ChartApp.data.reader.DynamicChartReader', {
    extend : 'Ext.data.reader.Json',
    alias : 'widget.dynamicChartReader',
    xtype : 'dynamicChartReader',
    mixins : {
        dynamicReader : 'ChartApp.mixins.reader.DynamicReaderMixin'
    },
    config : {
        xField : null
    },

    readRecords : function(data) {
        console.log('Reading records...');

        if (data.metaData == null) {
            data = this.mixin.dynamicReader.readRecords.call(this, data);
        }

        return this.callParent([data]);
    }
});

Ext.define("ChartApp.model.Climate", {
    extend: "Ext.data.Model",
    fields: ["month", "high", "low", {
        name: "highF",
        calculate: function (b) {
            return toFaherenheit(b.high);
        }
    }, {
        name: "lowF",
        calculate: function (b) {
            return toFaherenheit(b.low);
        }
    }],    
});

Ext.define("ChartApp.store.Climate", {
    extend: "Ext.data.Store",
    alias: "store.climate",
    model : "ChartApp.model.Climate",
    counter: 0,
    generateData: function () {
        var h = this.config.data,
            e, j, g = [];
        for (e = 0; e < h.length; e++) {
            g.push({
                month: h[e].month,
                high: 20 + Math.random() * 20,
                low: Math.random() * 20
            })
        }
        return g
    },
    refreshData: function () {
        this.setData(this.generateData())
    }
});

Ext.define('ChartApp.view.charts.column.MultiAxis', {
    extend: 'Ext.container.Container',
    xtype: 'column-multi-axis',

    width: 650,
    height: 500,

    initComponent: function () {
        var me = this;

        var highSeries = {
            type: 'line',
            xField: 'month',
            yField: ['highF'],
            yAxis: 'fahrenheit-axis',
            style: {
                lineWidth: 2,
                fillStyle: '#115fa6',
                strokeStyle: '#115fa6',
                fillOpacity: 0.6,
                miterLimit: 3,
                lineCap: 'miter'
            },
            colors : [ '#115fa6' ],
            title : ['High'],
            tooltip: {
                trackMouse: true,
                style: 'background: #444; color: #FFF',
                renderer: function(storeItem, item) {
                    var title = item.series.getTitle()[0];
                    this.setHtml(title + ' for '
                        + storeItem.get('month') + ': ' 
                        + storeItem.get(item.field).toFixed(2) + '°');
                }
            }
        },
        lowSeries = Ext.apply({}, {
            yField: ['lowF'],
            style: {
                lineWidth: 2,
                fillStyle: '#ff8800',
                strokeStyle: '#884400',
                fillOpacity: 0.6,
                miterLimit: 3,
                lineCap: 'miter'
            },
            colors : [ '#ff8800' ],
            title : ['Low'],
        }, highSeries);

        me.items = [{
            xtype: 'cartesian',
            legend : {
                hidden : true
            },
            store: {
                type: 'climate',
                reader: {
                    xtype : 'dynamicChartReader'
                }
            },
            insetPadding: 10,
            innerPadding: {
                left: 20,
                right: 20
            },
            interactions: 'crosszoom',
            axes: [{
                type: 'numeric',
                id: 'fahrenheit-axis',
                adjustByMajorUnit: true,
                position: 'left',
                titleMargin: 20,
                minimum: 32,
                grid: true,
                title: {
                    text: 'Temperature in °F',
                    fontSize: 14
                },
                listeners: {
                    rangechange: function (range) {
                        var cAxis = this.getChart().getAxis('celsius-axis');
                        if (cAxis) {
                            cAxis.setMinimum(toCelcius(range[0]));
                            cAxis.setMaximum(toCelcius(range[1]));
                        }
                    }
                }
            }, {
                id: 'celsius-axis',
                type: 'numeric',
                titleMargin: 20,
                position: 'right',
                title: {
                    text: 'Temperature in °C',
                    fontSize: 14,
                    fillStyle: 'red'
                }
            }, {
                id: 'months-axis',
                type: 'category',
                position: 'bottom',
                title: {
                    text: 'Months'
                }
            }, {
                position: 'top',
                linkedTo: 'months-axis',
                title: {
                    text: 'Climate data for Redwood City, California',
                    fontSize: 16,
                    fillStyle: 'green'
                },
                titleMargin: 20
            }],
            series: [ highSeries, lowSeries ]
        }];

        this.callParent();
    },

    getChart : function() {
        return this.down('cartesian');
    },

    getStore : function() {
        return this.getChart().getStore();
    },

    getLegendStore : function() {
        return this.getChart().getLegendStore();
    }
});

Ext.define('ChartApp.chart.Legend', {
    extend : 'Ext.chart.Legend',
    xtype: 'extendedlegend',
    docked : 'left',

    tpl: [
        '<div class="', Ext.baseCSSPrefix, 'legend-container">',
        '<tpl for=".">',
        '<div class="', Ext.baseCSSPrefix, 'legend-item">',
        '<input type="checkbox" class="', Ext.baseCSSPrefix, 'legend-item-check" checked="true" />',
        '<span ',
        'class="', Ext.baseCSSPrefix,
        'legend-item-marker {[ values.disabled ? Ext.baseCSSPrefix + \'legend-inactive\' : \'\' ]}" ',
        'style="background:{mark};">',
        '</span>{name}',
        '</div>',
        '</tpl>',
        '</div>'
    ],

    initComponent : function() {
        var me = this;

        me.callParent(arguments);
    },

    onItemClick: function (record, item, index, e) {
        var target = e.getTarget();
        var disabled = record.get('disabled');

        if (this.isCheckBox(target)) {
            target.checked = !disabled;
            console.log(target.checked);
            this.callParent(arguments);
        }
    },

    isCheckBox : function(element) {
        return element && element.tagName.toLowerCase() === 'input' && element.type === 'checkbox';
    }
});

Ext.define('ChartApp.components.ChartContainer', {
    extend : 'Ext.container.Container',
    alias : 'widget.chartcontainer',
    referenceHolder: true,
    height : 600,
    width : 800,
    layout: 'border',
    items: [{
        region : 'west',
        title : 'Legend',
        items : [{
            xtype : 'extendedlegend',
            reference : 'chartLegend',
        }],
        width : 180,
        minHeight : 550,
        collapsible : true,
        collasped : false,
        split : true,
        animCollapse : true
    }, {
        region : 'center',
        reference : 'chartWrapper',
        layout : 'fit',
        margins : '5 5 0 0',
        items : [{
            xtype : 'column-multi-axis',
            reference : 'chart',
            layout : 'fit'
        }]
    }],

    initComponent : function() {
        var me = this;

        me.callParent(arguments);

        var chart = me.lookupReference('chart');
        chart.getStore().loadData(climateData);

        var legend = me.lookupReference('chartLegend');
        legend.setStore(chart.getLegendStore());
    }
});

Ext.onReady(function() {
    Ext.create('Ext.panel.Panel', {
        title : 'Dual Axis Example',
        layout : 'fit',
        items : [{
            xtype : 'chartcontainer'
        }],
        renderTo: Ext.getBody(),
    });
});

function toCelcius(faherenheit) {
    return (faherenheit - 32) / 1.8;
};

function toFaherenheit(celcius) {
    return (celcius * 1.8) + 32;
};

function getClimateData() {
    return [
        { month: "Jan", high: 14.7, low: 5.6 },
        { month: "Feb", high: 16.5, low: 6.6 },
        { month: "Mar", high: 18.6, low: 7.3 },
        { month: "Apr", high: 20.8, low: 8.1 },
        { month: "May", high: 23.3, low: 9.9 },
        { month: "Jun", high: 26.2, low: 11.9 },
        { month: "Jul", high: 27.7, low: 13.3 },
        { month: "Aug", high: 27.6, low: 13.2 },
        { month: "Sep", high: 26.4, low: 12.1 },
        { month: "Oct", high: 23.6, low: 9.9 },
        { month: "Nov", high: 17.0, low: 6.8 },
        { month: "Dec", high: 14.7, low: 5.8 }
    ];
}

示例B

在本例中，column-multi-axis直接扩展cartesian图表。不知什么原因，在调用this.callParent()之后，在chartcontainer的initComponent中，商店在图表上仍然是一个配置。

Demo @ JSFiddle

var climateData = getClimateData();

Ext.define('ChartApp.mixins.reader.DynamicReaderMixin', {
    extend : 'Ext.Mixin',

    readRecords : function(data) {
        var me = this;
        var rootData = data;
        console.log(data);        

        this.callParent(arguments);
    }
});

Ext.define('ChartApp.data.reader.DynamicChartReader', {
    extend : 'Ext.data.reader.Json',
    alias : 'widget.dynamicChartReader',
    xtype : 'dynamicChartReader',
    mixins : {
        dynamicReader : 'ChartApp.mixins.reader.DynamicReaderMixin'
    },
    config : {
        xField : null
    },

    readRecords : function(data) {
        console.log('Reading records...');

        if (data.metaData == null) {
            data = this.mixin.dynamicReader.readRecords.call(this, data);
        }

        return this.callParent([data]);
    }
});

Ext.define("ChartApp.model.Climate", {
    extend: "Ext.data.Model",
    fields: ["month", "high", "low", {
        name: "highF",
        calculate: function (b) {
            return toFaherenheit(b.high);
        }
    }, {
        name: "lowF",
        calculate: function (b) {
            return toFaherenheit(b.low);
        }
    }],    
});

Ext.define("ChartApp.store.Climate", {
    extend: "Ext.data.Store",
    alias: "store.climate",
    model : "ChartApp.model.Climate",
    counter: 0,
    generateData: function () {
        var h = this.config.data,
            e, j, g = [];
        for (e = 0; e < h.length; e++) {
            g.push({
                month: h[e].month,
                high: 20 + Math.random() * 20,
                low: Math.random() * 20
            })
        }
        return g
    },
    refreshData: function () {
        this.setData(this.generateData())
    }
});

Ext.define('ChartApp.view.charts.column.MultiAxis', {
    extend: 'Ext.chart.CartesianChart',
    xtype: 'column-multi-axis',

    width: 650,
    height: 500,

    initComponent: function () {
        var me = this;

        var highSeries = {
            type: 'line',
            xField: 'month',
            yField: ['highF'],
            yAxis: 'fahrenheit-axis',
            style: {
                lineWidth: 2,
                fillStyle: '#115fa6',
                strokeStyle: '#115fa6',
                fillOpacity: 0.6,
                miterLimit: 3,
                lineCap: 'miter'
            },
            colors : [ '#115fa6' ],
            title : ['High'],
            tooltip: {
                trackMouse: true,
                style: 'background: #444; color: #FFF',
                renderer: function(storeItem, item) {
                    var title = item.series.getTitle()[0];
                    this.setHtml(title + ' for '
                        + storeItem.get('month') + ': ' 
                        + storeItem.get(item.field).toFixed(2) + '°');
                }
            }
        },
        lowSeries = Ext.apply({}, {
            yField: ['lowF'],
            style: {
                lineWidth: 2,
                fillStyle: '#ff8800',
                strokeStyle: '#884400',
                fillOpacity: 0.6,
                miterLimit: 3,
                lineCap: 'miter'
            },
            colors : [ '#ff8800' ],
            title : ['Low'],
        }, highSeries);

        Ext.apply(me, {
            legend : {
                hidden : true
            },
            store: {
                type: 'climate',
                reader: {
                    xtype : 'dynamicChartReader'
                }
            },
            insetPadding: 10,
            innerPadding: {
                left: 20,
                right: 20
            },
            interactions: 'crosszoom',
            axes: [{
                type: 'numeric',
                id: 'fahrenheit-axis',
                adjustByMajorUnit: true,
                position: 'left',
                titleMargin: 20,
                minimum: 32,
                grid: true,
                title: {
                    text: 'Temperature in °F',
                    fontSize: 14
                },
                listeners: {
                    rangechange: function (range) {
                        var cAxis = this.getChart().getAxis('celsius-axis');
                        if (cAxis) {
                            cAxis.setMinimum(toCelcius(range[0]));
                            cAxis.setMaximum(toCelcius(range[1]));
                        }
                    }
                }
            }, {
                id: 'celsius-axis',
                type: 'numeric',
                titleMargin: 20,
                position: 'right',
                title: {
                    text: 'Temperature in °C',
                    fontSize: 14,
                    fillStyle: 'red'
                }
            }, {
                id: 'months-axis',
                type: 'category',
                position: 'bottom',
                title: {
                    text: 'Months'
                }
            }, {
                position: 'top',
                linkedTo: 'months-axis',
                title: {
                    text: 'Climate data for Redwood City, California',
                    fontSize: 16,
                    fillStyle: 'green'
                },
                titleMargin: 20
            }],
            series: [ highSeries, lowSeries ]
        });

        this.callParent();
    }
});

Ext.define('ChartApp.chart.Legend', {
    extend : 'Ext.chart.Legend',
    xtype: 'extendedlegend',
    docked : 'left',

    tpl: [
        '<div class="', Ext.baseCSSPrefix, 'legend-container">',
        '<tpl for=".">',
        '<div class="', Ext.baseCSSPrefix, 'legend-item">',
        '<input type="checkbox" class="', Ext.baseCSSPrefix, 'legend-item-check" checked="true" />',
        '<span ',
        'class="', Ext.baseCSSPrefix,
        'legend-item-marker {[ values.disabled ? Ext.baseCSSPrefix + \'legend-inactive\' : \'\' ]}" ',
        'style="background:{mark};">',
        '</span>{name}',
        '</div>',
        '</tpl>',
        '</div>'
    ],

    initComponent : function() {
        var me = this;

        me.callParent(arguments);
    },

    onItemClick: function (record, item, index, e) {
        var target = e.getTarget();
        var disabled = record.get('disabled');

        if (this.isCheckBox(target)) {
            target.checked = !disabled;
            console.log(target.checked);
            this.callParent(arguments);
        }
    },

    isCheckBox : function(element) {
        return element && element.tagName.toLowerCase() === 'input' && element.type === 'checkbox';
    }
});

Ext.define('ChartApp.components.ChartContainer', {
    extend : 'Ext.container.Container',
    alias : 'widget.chartcontainer',
    referenceHolder: true,
    height : 600,
    width : 800,
    layout: 'border',
    items: [{
        region : 'west',
        title : 'Legend',
        items : [{
            xtype : 'extendedlegend',
            reference : 'chartLegend',
        }],
        width : 180,
        minHeight : 550,
        collapsible : true,
        collasped : false,
        split : true,
        animCollapse : true
    }, {
        region : 'center',
        reference : 'chartWrapper',
        layout : 'fit',
        margins : '5 5 0 0',
        items : [{
            xtype : 'column-multi-axis',
            reference : 'chart',
            layout : 'fit'
        }]
    }],

    initComponent : function() {
        var me = this;

        me.callParent(arguments);

        var chart = me.lookupReference('chart');

        console.log(chart.getStore()); // Still a config

        chart.getStore().loadData(climateData);

        var legend = me.lookupReference('chartLegend');
        legend.setStore(chart.getLegendStore());
    }
});

Ext.onReady(function() {
    Ext.create('Ext.panel.Panel', {
        title : 'Dual Axis Example',
        layout : 'fit',
        items : [{
            xtype : 'chartcontainer'
        }],
        renderTo: Ext.getBody(),
    });
});

function toCelcius(faherenheit) {
    return (faherenheit - 32) / 1.8;
};

function toFaherenheit(celcius) {
    return (celcius * 1.8) + 32;
};

function getClimateData() {
    return [
        { month: "Jan", high: 14.7, low: 5.6 },
        { month: "Feb", high: 16.5, low: 6.6 },
        { month: "Mar", high: 18.6, low: 7.3 },
        { month: "Apr", high: 20.8, low: 8.1 },
        { month: "May", high: 23.3, low: 9.9 },
        { month: "Jun", high: 26.2, low: 11.9 },
        { month: "Jul", high: 27.7, low: 13.3 },
        { month: "Aug", high: 27.6, low: 13.2 },
        { month: "Sep", high: 26.4, low: 12.1 },
        { month: "Oct", high: 23.6, low: 9.9 },
        { month: "Nov", high: 17.0, low: 6.8 },
        { month: "Dec", high: 14.7, low: 5.8 }
    ];
}

Answer 1

Store在这一点上还不存在-更好地说，还没有尝试运行setStore()。如果你真的需要它，试着调用：

chart.setStore(chart.getStore());

它应该调用负责创建存储的底层setter方法。