amCharts v4：推入Series至XYChartScrollbar后系列及网格消失问题

你遇到的问题核心原因很明确：amCharts v4中的每个系列实例只能隶属于一个图表。你直接把主图表里的series1推到滚动条的scrollbarChart中，相当于把这个系列从主图表转移到了滚动条图表里，自然主图表里就看不到这个系列和相关网格了。

正确的做法是为滚动条单独创建一个新的系列，而不是复用主图表的系列实例。下面是修复后的完整代码：

window.onload = () => {
    // Create chart instance
    chart = am4core.create("chartdiv", am4charts.XYChart);
    chart.data = [
        { date: "2012-01-01", value: 8 },
        { date: "2012-01-02", value: 10 },
        { date: "2012-01-03", value: 12 },
        { date: "2012-01-04", value: 14 },
        { date: "2012-01-05", value: 11 },
        { date: "2012-01-06", value: 6 },
        { date: "2012-01-07", value: 7 },
        { date: "2012-01-08", value: 9 },
        { date: "2012-01-09", value: 13 },
        { date: "2012-01-10", value: 15 },
        { date: "2012-01-11", color: "#CC0000", value: 19 },
        { date: "2012-01-12", value: 21 },
        { date: "2012-01-13", value: 22 },
        { date: "2012-01-14", value: 20 },
        { date: "2012-01-15", value: 18 },
        { date: "2012-01-16", value: 14 },
        { date: "2012-01-17", value: 16 },
        { date: "2012-01-18", value: 18 },
        { date: "2012-01-19", value: 17 },
        { date: "2012-01-20", value: 15 },
        { date: "2012-01-21", value: 12 },
        { date: "2012-01-22", value: 10 },
        { date: "2012-01-23", value: 8 }
    ];
    // Create axes
    const dateAxis = chart.xAxes.push(new am4charts.CategoryAxis());
    dateAxis.dataFields.category = "date";
    dateAxis.renderer.grid.template.disabled = false;
    dateAxis.fontSize = 22;
    // Value Axis
    const valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
    valueAxis.renderer.grid.template.disabled = false;
    valueAxis.renderer.line.strokeOpacity = 0.3;
    valueAxis.renderer.line.strokeWidth = 2;
    valueAxis.renderer.line.stroke = am4core.color("rgba(255, 255, 255, 0.4)");
    // Create main chart series
    const series1 = chart.series.push(new am4charts.LineSeries());
    series1.dataFields.valueY = "value";
    series1.dataFields.categoryX = "date";
    series1.strokeWidth = 4;
    series1.strokeOpacity = 1;
    // Scroller setup
    const scroller = new am4charts.XYChartScrollbar();
    chart.scrollbarX = scroller;
    
    // 为滚动条创建独立的系列，而不是复用主图表的series1
    const scrollSeries = scroller.scrollbarChart.series.push(new am4charts.LineSeries());
    scrollSeries.dataFields.valueY = "value";
    scrollSeries.dataFields.categoryX = "date";
    // 可以根据需要调整滚动条系列的样式，比如更细的线条
    scrollSeries.strokeWidth = 2;
};

关键修复点说明： #

• 移除了直接将series1推入滚动条系列的代码
• 为滚动条的scrollbarChart单独创建了一个新的LineSeries实例，配置相同的数据字段，确保和主图表数据同步
• 可选：你可以给滚动条的系列设置不同的样式，让它和主图表系列区分开

这样修改后，主图表的系列和网格会正常显示，滚动条也会正确渲染对应的系列，并且和主图表的分类轴保持一致。

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