Angular中Highcharts Series Data数组构建问题求助

问题分析 #

1. 重复数据：原代码用嵌套循环遍历标签和数值数组，导致每一组标签-数值被重复添加，产生冗余数据。
2. 渲染错误：原代码通过字符串拼接生成类似对象的结构，但实际传入的是字符串数组而非合法JavaScript对象；同时series.data错误嵌套了数组，导致Highcharts无法解析数值，触发NaN相关渲染报错。

修正方案 #

核心修正点 #

• 移除嵌套循环，改为单循环同步遍历标签和数值数组（需确保两个数组长度一致）
• 直接构造JavaScript对象而非字符串拼接，同时清理原始字符串中的多余单引号
• 修正series.data的赋值方式，避免数组嵌套

修正后的完整代码 #

public getValue(taskLbl: any, taskNbr: any) {
    const colors = Highcharts.getOptions().colors;
    const objects: Array<{name: string, y: number, color: string}> = [];

    // 处理原始字符串：拆分后移除前后单引号并去除空格
    const arraylbl = taskLbl.split(',').map(item => item.trim().replace(/^'|'$/g, ''));
    const arrayNbr = taskNbr.split(',').map(item => item.trim().replace(/^'|'$/g, ''));

    // 同步遍历构造合法数据对象
    for (let i = 0; i < arraylbl.length; i++) {
        const yValue = parseFloat(arrayNbr[i]);
        // 过滤无效数值，避免NaN
        if (!isNaN(yValue)) {
            objects.push({
                name: arraylbl[i],
                y: yValue,
                color: colors[i] || '#666666' // 兜底颜色防止colors数组长度不足
            });
        }
    }

    this.fillData(objects);
    Highcharts.chart('container', this.options);
}

public fillData(objects: Array<{name: string, y: number, color: string}>) {
    this.options = {
        chart: {
            type: 'pie',
            options3d: {
                enabled: true,
                alpha: 45
            }
        },
        title: {
            text: 'stat'
        },
        subtitle: {
            text: ''
        },
        plotOptions: {
            pie: {
                innerSize: 100,
                depth: 45
            }
        },
        series: [{
            name: 'number',
            data: objects // 直接传入对象数组，无需额外嵌套
        }],
    };
}

关键说明 #

• 数值类型转换：将字符串数值转为数字类型，确保Highcharts能正确识别数据
• 单引号清理：通过正则移除原始字符串前后的单引号，避免标签或数值带多余引号
• 数组嵌套修复：series.data直接赋值处理后的对象数组，消除嵌套导致的解析错误
• 异常兜底：添加默认颜色和无效数值过滤，提升代码健壮性

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