Amchart 填充背景下划线

如何解决Amchart 填充背景下划线

我来问你是否可以将图表底部的背景颜色更改为蓝色？

项目的上下文包括显示一个带有销售目标的轴，另一个轴表示营业额。我希望曲线上方的部分为绿色，下方的部分完全填充为蓝色。

我遵循了这个代码，它是 amchart 站点的一个示例。 https://www.amcharts.com/demos/range-chart-with-different-fill-colors/

这是我的代码

am4core.ready(function() {

    // Themes begin
    am4core.useTheme(am4themes_animated);
    // Themes end

    var chart = am4core.create("chartdiv",am4charts.XYChart);
    chart.hiddenState.properties.opacity = 0; // this creates initial fade-in

    var data = [];
    var ca = 0;
    var objectif = 0;

    var objectifMax = 100000;
    var toAdd = objectifMax / 31;

    for (var i = 1; i <= 31; i++) {

        objectif = objectif + toAdd;
        ca = Math.round(Math.random() * 100000);

        data.push({ date: new Date(2021,7,i),open: objectif,close: ca });
    }

    chart.data = data;

    var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
    dateAxis.renderer.grid.template.location = 0;
    dateAxis.renderer.minGriddistance = 60;

    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
    valueAxis.tooltip.disabled = true;

    var series = chart.series.push(new am4charts.Lineseries());
    series.datafields.dateX = "date";
    series.datafields.openValueY = "open";
    series.datafields.valueY = "close";
    series.tooltipText = "Objectif: {openValueY.value} \n Chiffre d'affaires: {valueY.value}";
    series.strokeWidth = 3;
    series.stroke = am4core.color("#1bb350");
    series.fill = series.stroke;
    series.fillOpacity = 0.8;
    series.tensionX = 0.77;

    var series2 = chart.series.push(new am4charts.Lineseries());
    series2.datafields.dateX = "date";
    series2.datafields.valueY = "open";
    series2.stroke = am4core.color("#7367f0");
    series2.fill = series2.stroke;

    chart.cursor = new am4charts.XYCursor();
    chart.cursor.xAxis = dateAxis;
    chart.scrollbarX = new am4core.Scrollbar();

    // create ranges
    var negativeRange;

    // create ranges
    chart.events.on("datavalidated",function() {
        series.dataItems.each(function(s1DataItem) {
            var s1PrevIoUsDataItem;
            var s2PrevIoUsDataItem;

            var s2DataItem = series2.dataItems.getIndex(s1DataItem.index);

            if (s1DataItem.index > 0) {
                s1PrevIoUsDataItem = series.dataItems.getIndex(s1DataItem.index - 1);
                s2PrevIoUsDataItem = series2.dataItems.getIndex(s1DataItem.index - 1);
            }

            var startTime = am4core.time.round(new Date(s1DataItem.dateX.getTime()),dateAxis.baseInterval.timeUnit,dateAxis.baseInterval.count).getTime();

            // intersections
            if (s1PrevIoUsDataItem && s2PrevIoUsDataItem) {
                var x0 = am4core.time.round(new Date(s1PrevIoUsDataItem.dateX.getTime()),dateAxis.baseInterval.count).getTime() + dateAxis.baseDuration / 2;
                var y01 = s1PrevIoUsDataItem.valueY;
                var y02 = s2PrevIoUsDataItem.valueY;

                var x1 = startTime + dateAxis.baseDuration / 2;
                var y11 = s1DataItem.valueY;
                var y12 = s2DataItem.valueY;

                var intersection = am4core.math.getLineIntersection({ x: x0,y: y01 },{ x: x1,y: y11 },{ x: x0,y: y02 },y: y12 });

                startTime = Math.round(intersection.x);
            }

            // start range here
            if (s2DataItem.valueY > s1DataItem.valueY) {
                if (!negativeRange) {
                    negativeRange = dateAxis.createSeriesRange(series);
                    negativeRange.date = new Date(startTime);
                    negativeRange.contents.fill = series2.fill;
                    negativeRange.contents.fillOpacity = 0.8;
                }
            } else {
                // if negative range started
                if (negativeRange) {
                    negativeRange.endDate = new Date(startTime);
                }
                negativeRange = undefined;
            }
            // end if last
            if (s1DataItem.index == series.dataItems.length - 1) {
                if (negativeRange) {
                    negativeRange.endDate = new Date(s1DataItem.dateX.getTime() + dateAxis.baseDuration / 2);
                    negativeRange = undefined;
                }
            }
        })
    })
});

<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>

<div id="chartdiv" style="height: 300px;"><div>