Ext js 7 现代图表动态系列缺失数据

Question

我有一个动态 sencha ext js 7.3.1 图表，其中包含从 json 生成的动态系列，如下所示：

"data": {
    "2017": {
        "Jahr": "2017",
        "data1": "0.00",
        "data2": "0.00",
        "data3": "80.40",
        "data4": "415.00",
        "data5": "0.00"
    },
    "2018": {
        "Jahr": "2018",
        "data6": "89.00",
        "data2": "175.20",
        "data4": "440.00"
    },
    "2019": {
        "Jahr": "2019",
        "data1": "56.40",
        "data4": "440.00",
        "data5": "81.60"
    },
    "2020": {
        "Jahr": "2020",
        "data6": "94.00",
        "data4": "450.00",
        "data5": "82.80"
    }
},
"series": {
    "0": "data3",
    "1": "data4",
    "2": "data6",
    "3": "data2",
    "5": "data1",
    "7": "data5"
}

当我生成图表并像这样对变换进行系列更新时：

                var chart = Ext.getCmp('home-stats');
                
                for(x = 0; x < chart._series.length; x++)
                {
                    chart.removeSeries(chart._series[x].id);
                }
            
                var objSeries = Object.values(data.series); 
                for(x = 0; x < objSeries.length; x++) 
                {                           
                    var serie = 
                    {
                        type: 'bar',
                        axis: 'left',
                        xField: 'Jahr',
                        yField: objSeries[x], 
                        title: objSeries[x], 
                        stacked: true,
                    };
                    chart.addSeries(serie);                     
                }

我实际上缺少 2017 年的数据，我不知道为什么。

这是一个有效的小提琴： https://fiddle.sencha.com/#view/editor&fiddle/3cb7

Answer 1

问题是条形图没有堆叠。我在下一个小提琴中更正了您的代码以解决问题：

https://fiddle.sencha.com/#view/editor&fiddle/3cbd

修改在store.js中：

var objSeries = Object.values(data.series);

 chart.setSeries([{
     type: 'bar',
     xField: 'Jahr',
     yField: objSeries,
     title: objSeries,
     stacked: true,
     style: {
           minGapWidth: 15
     },
     tooltip: {
     renderer: function (tooltip, model, item) {
                      tooltip.setHtml(item.record.get('Jahr') + ' ' + item.field + ' ' + Ext.util.Format.currency(model.get(item.field), '€', 2, true, ' '));
     }
  }
 }]);