javascript - 将多个系列加载到图表中

Question

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

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

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

根据我在 GridView 中选择的条目数量，我想为每个条目绘制三行('count_impressions'、'count_clicks'、'count_conversions')，这意味着 GridView 中的每个条目，将商店里有几件商品。

目前，每次选择更改时都会调用以下函数:

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();
    }
}

有了它，我可以将 GridView 中的哪个条目更改为图表。但这不是我想要的。如何显示“多个商店”？

我想到了一个解决方案，我必须尝试:通过执行类似 { date : 'impressions_1', 'impressions_2', ... } 的操作来“线性化”商店。但该解决方案只会将黑客攻击的复杂性从图表转移到商店。

Answer 1

问题的前半部分是有道理的，但是这一段却把它扔掉了:

With that I can change which entry in the grid view to graph. But thats not what I would like to have. How can I show "multiple stores"?

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

使用您在问题中包含的 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();
}