AnyChart 8.2.0资源甘特图编辑模式下如何判断所处时段？

Hey there! I’ve run into similar quirks with AnyChart’s edit mode context before, so let’s break down how to fix your undefined periodIndex issue.

The Root Cause #

In non-edit mode, AnyChart’s tooltip callback passes periodIndex directly in the event object because the timeline is static. But when you switch to edit mode, the tooltip context shifts—periodIndex isn’t exposed the same way because the UI is handling interactive elements like drag handles or resizable period edges.

Solution: Get Period Index from the Target Element #

Instead of relying on e.periodIndex, we can pull the period index directly from the hovered target element and its associated task. Here’s how to adjust your tooltip code:

// Custom timeLine Tooltip
timeLine.tooltip().useHtml(true);
timeLine.tooltip().format(function (e) {
    let periodIndex;

    // Fallback to direct periodIndex for non-edit mode
    if (e.periodIndex !== undefined) {
        periodIndex = e.periodIndex;
    } 
    // Handle edit mode by fetching from target/period reference
    else if (e.target && e.target.period && e.target.task) {
        const taskPeriods = e.target.task.periods();
        // Find the index of the hovered period in the task's period list
        periodIndex = taskPeriods.indexOf(e.target.period);
    }

    // Now use periodIndex for your custom tooltip logic
    if (periodIndex !== undefined) {
        // Replace this with your actual tooltip content logic
        return `<div class="custom-tooltip">
                    <p>时段 ${periodIndex + 1}</p>
                    <!-- Add your custom content based on periodIndex here -->
                </div>`;
    } else {
        // Fallback content if index can't be retrieved
        return `<div>无法获取时段信息</div>`;
    }
});

Pro Tip for Debugging #

If this doesn’t work immediately, add a console.log(e) inside the format function while in edit mode. This will let you inspect the full event object structure—sometimes the exact path to the period/task might vary slightly based on your chart configuration, and debugging will help you tweak the code to match your setup.

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