移除仪表盘最后一个图表后Range Slider消失的修复咨询

问题场景 #

基于LightningChart实现的Angular仪表盘组件，添加Track图表时Range Slider可正常显示，但移除最后一个Track后，Range Slider会随之消失。

问题根源 #

当最后一个图表被销毁后，页面中不再存在任何与Range Slider绑定的轴实例，导致Range Slider失去挂载目标而消失。

代码修改方案 #

1. 修改removeChart方法，保留占位图表 #

移除最后一个Track时，创建一个空的占位图表来承载Range Slider：

private removeChart(trackId: string): void {
    const index: number = this.instances.findIndex(instance => instance.track.id === trackId);
    this.instances[index].chart.dispose();
    this.instances.splice(index, 1);
    
    // 最后一个图表被移除后，创建空占位图表
    if (this.instances.length === 0) {
        const emptyChart: ChartXY = this.dashboard.createChartXY({
            columnIndex: this.isAppearanceHorizontal ? 0 : 0,
            rowIndex: this.isAppearanceHorizontal ? 0 : 0,
            defaultAxisX: { opposite: !this.isAppearanceHorizontal },
        });
        // 隐藏不需要的轴，只保留承载Range Slider的轴
        this.isAppearanceHorizontal 
            ? emptyChart.getDefaultAxisY().setVisible(false) 
            : emptyChart.getDefaultAxisX().setVisible(false);
        this.chartSharedService.setChartBaseStyles(emptyChart, this.isAppearanceHorizontal);
        this.instances.push({ track: {} as ITrack, rowIndex: 0, chart: emptyChart, series: [], customMarker: null });
    }
    
    this.setRowsHeights();
    this.redrawTimeDepthAxes();
    this.synchronizeTimeDepthAxisIntervals();
}

2. 调整setRowsHeights方法，处理无Track的情况 #

当没有Track时，为占位图表分配完整的容器空间：

private setRowsHeights(): void {
    for (let i = 0; i < this.MAXIMUM_TRACKS_QUANTITY; i++) {
        this.isAppearanceHorizontal
            ? this.dashboard.setRowHeight(i, 0)
            : this.dashboard.setColumnWidth(i, 0);
    }

    // 无Track时，为占位图表设置完整尺寸
    if (this.tracks.length === 0) {
        const fullSize = 100;
        this.isAppearanceHorizontal
            ? this.dashboard.setRowHeight(0, fullSize)
            : this.dashboard.setColumnWidth(0, fullSize);
        return;
    }

    const size: number = 100 / this.tracks.length;
    const growIndex: number = this.isAppearanceHorizontal ? 0.08 : 0;
    const mainTrackGrowIndex: number = (growIndex * this.tracks.length) + 1;

    this.tracks.forEach((track: ITrack, index: number): void => {
        const relativeSize: number = index === this.tracks.length - 1 ? size * mainTrackGrowIndex : size;
        this.isAppearanceHorizontal
            ? this.dashboard.setRowHeight(index, relativeSize)
            : this.dashboard.setColumnWidth(index, relativeSize);
    })
}

3. 更新redrawTimeDepthAxes方法，适配占位图表 #

确保占位图表的轴被标记为主轴，正确渲染Range Slider：

private redrawTimeDepthAxes(): void {
    this.instances.forEach(({ chart }: IChartDashboardInstance, index: number) => {
        // 唯一的占位图表直接标记为主轴
        const isMainAxis: boolean = this.instances.length === 1 
            ? true 
            : (this.isAppearanceHorizontal ? index === this.tracks.length - 1 : index === 0);
        this.setDefaultStylesToTimeDepthAxis(chart, isMainAxis);
    })
}

原理说明 #

通过在最后一个图表被移除时创建一个占位图表，保留了承载Range Slider的轴实例，同时隐藏不必要的视觉元素，既保证Range Slider持续显示，又不影响页面布局的整洁性。

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