ExtJS 6.5.2-未正确呈现多行图表

我正在尝试创建多行图表。添加单个系列效果良好。然而，我正在尝试多个系列，问题从这里开始。所有线条都有相同的颜色，我相信这是因为数据的结构。
从所有示例中，我发现所有系列的数据都包含在每个记录中。但我的数据不同，因为每个系列的yField都是相同的。数据结构如下：

2022-01-01, 'Emilia-Romagna', 1522.23

2022-01-01, 'Lombardia', 1299.34

2022-01-02, 'Emilia-Romagna', 1533.45

2022-01-02, 'Lombardia', 1544.21

这里有一把小提琴：https://fiddle.sencha.com/#view/editor&fiddle/3i9n
有人知道这是否可能吗？或者我必须更改数据并将yField与每个系列分开吗？

您需要拆分数据，如下所示：

Ext.application({
    name: 'Fiddle',

    launch: function () {
        var series = [];

        function JSONtoDate(v, j) {
            if (v) {
                var ret = new Date(v);
                return ret;
            } else {
                return v;
            }
        }
        var coronaItaliaCaseStore = Ext.create('Ext.data.Store', {
            storeId: 'coronaItaliaCaseStore',
            fields: [{
                name: 'data',
                type: 'date',
                convert: JSONtoDate
            }, {
                name: 'denominazione_regione',
                type: 'string'
            }, {
                name: 'Incidence7Days',
                type: 'float'
            }],
            sorters: [{
                property: 'data',
                direction: 'ASC'
            }, {
                property: 'denominazione_regione',
                direction: 'ASC'
            }],
            autoLoad: true,
            proxy: {
                type: 'ajax',
                url: 'data1.json',

                reader: {
                    type: 'json'
                }
            },
            listeners: {

                load: function (store, records, successful, operation, eOpts) {

                    if (successful) {
                        var data = {},
                            regions = new Set();
                        Ext.each(records, function (record, idx) {
                            if (!data[record.get('data')]) {
                                data[record.get('data')] = {
                                    timeStamp: record.get('data')
                                }
                            }
                            data[record.get('data')][record.get('denominazione_regione')] = record.get('Incidence7Days')
                            regions.add(record.get('denominazione_regione'))
                        });

                        for (var region of regions) {
                            series.push({
                                type: 'line',
                                title: region,
                                xField: 'timeStamp',
                                yField: region,
                                marker: {
                                    type: 'square',
                                    animation: {
                                        duration: 200,
                                        easing: 'backOut'
                                    }
                                },
                                tooltip: {
                                    trackMouse: true,
                                    renderer: function (tip, item) {
                                        tip.update(this._yField + ': ' + item.get(this._yField));
                                    }
                                }
                            });
                        }
                        data = Ext.Object.getValues(data);
                        console.log(data);
                        // Now can create the chart
                        var coronaItaliaCasesChart = Ext.create('Ext.chart.Chart', {
                            renderTo: 'demoChart',
                            width: '100%',
                            height: 600,
                            legend: {
                                type: 'sprite',
                                docked: 'right'
                            },
                            store: data,
                            captions: {
                                title: 'Incidence last 7 days per 100.000 inhabitants'
                            },
                            axes: [{
                                type: 'numeric',
                                position: 'left',
                                grid: true,
                                minimum: 0
                                    //renderer: 'onAxisLabelRender'
                            }, {
                                type: 'time',
                                fields: ['data'],
                                fromDate: new Date('Nov 1 2021'),
                                toDate: new Date('Jan 28 2022'),
                                position: 'bottom',
                                grid: true,
                                label: {
                                    rotate: {
                                        degrees: -45
                                    }
                                }
                            }],
                            series: series

                        }); // end of chart
                        // replace initial chart

                    } else {
                        Ext.Msg.alert('Error', 'Error loading Corona Italia Store.');
                    }
                }
            }
        });
    }
});

ExtJS 6.5.2-未正确呈现多行图表

1条答案

相关问题

热门标签

最新问答