求助：使用ApexCharts.js绘制动态系列时间线图表遇series无data错误

代码中的核心错误： #

• 拼写错误导致循环失效：
  代码里for (var j=0;j<task.lenght;j++)的lenght是拼写错误，正确应为length。这个错误会让循环条件不成立，_data数组始终为空，后续系列自然没有有效数据。

• 循环变量混淆导致数据无效：
  第一个循环用j作为索引，但内部却引用未定义的i变量（比如task[i]、startDates[i]），导致_data里的对象属性全是undefined，完全不符合ApexCharts的数据格式要求。

• Series结构嵌套错误：
  ApexCharts的series要求是对象数组，每个对象包含name和data属性。但你的代码把getResult()的返回值额外包了一层数组：series: [getResult()]，这会让series变成二维数组，Apex无法识别正确结构，从而抛出"data属性缺失"的错误。

• 数据分组逻辑错误：
  当前代码把所有任务塞进同一个_data数组，再按索引分配给开发者，既不符合"按开发者分组展示任务"的需求，还会出现数据错位问题（开发者数量和任务数量不匹配时）。正确逻辑应该是把任务分配到对应开发者的系列中。

修正后的代码： #

<div id='chart' style='height: 70vh;'></div>
<script> 
// 假设Bubble.io输出的变量已正确获取
var tasks=[Parent group's Sprint's tasks:each item's Name:formatted as JSON-safe];   
var developers=[Parent group's Sprint's tasks:each item's developer:unique elements's Fname:formatted as JSON-safe];    
var _startDates=[Parent group's Sprint's tasks:each item's Start-date:extract UNIX];
var _endDates=[Parent group's Sprint's tasks:each item's End-date:extract UNIX];
// 新增：获取每个任务对应的开发者名称，需Bubble.io输出该字段
var taskDevelopers=[Parent group's Sprint's tasks:each item's developer's Fname:formatted as JSON-safe];

// 简化日期转换
var startDates = _startDates.map(timestamp => new Date(timestamp));
var endDates = _endDates.map(timestamp => new Date(timestamp));

function getSeries() {
    // 先初始化每个开发者的空数据系列
    const series = developers.map(name => ({
        name: name,
        data: []
    }));

    // 遍历任务，分配到对应开发者的系列中
    for (let i = 0; i < tasks.length; i++) {
        const devName = taskDevelopers[i];
        const targetSeries = series.find(s => s.name === devName);
        if (targetSeries) {
            targetSeries.data.push({
                x: tasks[i],
                y: [startDates[i].getTime(), endDates[i].getTime()],
                fillColor: "#008FFB"
            });
        }
    }

    // 可选：过滤掉没有任务的开发者系列
    return series.filter(s => s.data.length > 0);
}

var options = {
    series: getSeries(), // 直接传入数组，去掉多余嵌套
    chart: {
        height: 450,
        type: 'rangeBar'
    },
    plotOptions: {
        bar: {
            horizontal: true
        }
    },
    xaxis: {
        type: 'datetime'
    }
};

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
</script>

关键修正说明： #

1. 修正length拼写错误，用map简化日期转换代码
2. 新增taskDevelopers变量，用于关联任务与开发者
3. 重构系列生成逻辑，按开发者分组分配任务，保证数据对应关系正确
4. 去掉series的额外数组嵌套，符合ApexCharts的参数格式要求
5. 可选过滤空数据系列，避免无任务的开发者占位

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