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

wbgh16ku  于 2022-11-04  发布在  其他
关注(0)|答案(1)|浏览(137)

我有一个动态的 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

roqulrg3

roqulrg31#

问题是酒吧没有堆叠。我是纠正你的代码在下一个小提琴解决问题:
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, ' '));
     }
  }
 }]);

相关问题