将多个系列加载到图表中

Bru*_*tos 5 javascript extjs extjs4 extjs-mvc

我想在我的一个ExtJS4图表中有很多LineSeries.

我有一个看起来像这样的商店:

Ext.define('DayStatistics', {
    extend:'Ext.data.ArrayStore',
    fields:[ 'date', 'count_impressions', 'count_clicks', 'count_conversions' ]
});
Run Code Online (Sandbox Code Playgroud)

根据我在网格视图中选择的条目数量,我想为每个条目绘制三条线('count_impressions','count_clicks','count_conversions'),这意味着网格视图中的每个条目都会有一对商店里的条目.

目前,我有以下函数,每个selectionchange都调用它:

loadChart: function (Model, records) {
    var removeChart = function (chart) {
        var series = chart.series.items, surface = chart.surface,
            length = series.length, len = surface.groups.keys.length,
            array = [];
        for (var i = 0; i < length; i++)
            array = Ext.Array.merge(array, series[i].group.keys);
        chart.series.clear();
        for (var j = 0; j < array.length; j++)
            surface.items.getByKey(array[j]).destroy();
        for (var t = 0; t < len; t++)
            surface.groups.items[t].destroy();
    };

    var chart = Ext.getCmp('advertiserstatisticlist.advertiserChart');
    removeChart(chart);

    for (var record in records) {
        chart.series.add({
            type:'line',
            xField:'date',
            yField:'count_impressions'
        });
        chart.store.loadData(records[record].data.days, true);
        chart.refresh();
    }
}
Run Code Online (Sandbox Code Playgroud)

有了它,我可以更改网格视图中的哪个条目进行图表.但这不是我想要的.我怎样才能展示"多家商店"?

我想到了一个解决方案,我必须尝试:通过做这样的事情来"线性化"商店{date:'impressions_1','impressions_2',...}.但是,这种解决方案只会将黑客的复杂性从图表转移到商店.

Aci*_*ier 1

问题的前半部分是有道理的,但这一段却让人不解:

这样我就可以将网格视图中的哪个条目更改为图形。但这不是我想要的。如何显示“多个商店”?

我假设你的意思是多个系列

selectionchange使用您在问题中包含的处理程序来做到这一点应该非常简单:

loadChart: function (selModel, records) {

    var chart = Ext.getCmp('advertiserstatisticlist.advertiserChart');

    chart.series.clear();

    for (var record in records) {
        chart.series.add({
            type:'line',
            xField:'date',
            yField: record.get(/*[whatever you named the "series name" field in the grid store]*/)
        });
    }
    chart.redraw();
}
Run Code Online (Sandbox Code Playgroud)