Ext JS 7.3.1 Modern动态系列图表缺失2017年数据问题求助

核心问题分析 #

你遇到的2017年数据缺失问题，主要由两个关键原因导致：

1. 错误操作私有API+循环移除逻辑缺陷
   你直接访问了Ext JS的私有属性chart._series，这是框架内部使用的属性，稳定性无法保证。同时正序循环移除系列时，每移除一个元素，_series数组长度会动态缩短，导致后续循环跳过部分旧系列。未被移除的旧系列会和新添加的系列产生冲突，干扰图表渲染逻辑，最终导致2017年数据无法正常显示。

2. 数据字段不完整
   你的JSON数据中，不同年份的字段不统一（比如2017年没有data6字段），虽然Ext JS Chart不会直接过滤缺失字段的记录，但缺失值会导致部分系列的bar无法渲染，叠加系列冲突问题后，就出现了整个年份数据消失的情况。

分步解决方法 #

1. 修复系列移除逻辑

放弃使用私有属性，改用官方APIgetSeries()获取系列，并通过倒序循环确保所有旧系列都被移除：

var chart = Ext.getCmp('home-stats');
// 用官方API获取所有系列
var existingSeries = chart.getSeries();
// 倒序循环移除，避免数组长度变化导致的索引错位
for (let i = existingSeries.length - 1; i >= 0; i--) {
    chart.removeSeries(existingSeries[i]);
}

2. 补全数据字段并转换类型

在将数据传入store前，补全所有缺失的字段（默认值设为0），同时将字符串格式的数值转为数字类型，确保Chart能正确解析：

// 获取所有需要渲染的系列字段
var allSeriesFields = Object.values(data.series);
// 加上年份字段，保证每条记录都包含基础字段
allSeriesFields.push('Jahr');

// 格式化数据：补全缺失字段+转换数值类型
var formattedRecords = Object.values(data.data).map(record => {
    const formatted = {...record};
    allSeriesFields.forEach(field => {
        // 缺失字段设为0.00
        if (!(field in formatted)) {
            formatted[field] = 0.00;
        }
    });
    // 将数值字符串转为数字（年份字段除外）
    Object.keys(formatted).forEach(key => {
        if (key !== 'Jahr') {
            formatted[key] = parseFloat(formatted[key]);
        }
    });
    return formatted;
});

// 更新图表绑定的store数据
chart.getStore().setData(formattedRecords);

3. 添加新系列并手动触发重绘

添加完新系列后，手动调用redraw()方法确保图表重新渲染，避免因框架内部异步更新导致的显示延迟：

var objSeries = Object.values(data.series);
for(let 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);
}
// 手动触发图表重绘
chart.redraw();

额外建议 #

• 避免直接操作Ext JS中以下划线开头的私有属性，这些属性不受官方兼容性保障，后续版本更新可能导致代码失效。
• 尽量提前定义store的model结构，明确所有需要的字段类型，这样框架能更稳定地处理数据，减少异常情况。

内容的提问来源于stack exchange，提问作者JustAwesome