0

我有一个包含两个“系列”的图表，只有当一个有价值而另一个没有价值时，它才会中断并且没有背景。如何解决？我已经尝试了来自不同网站、视频的几篇文章，并且还阅读了很多文档。似乎没有示例有效，所以我不知道该怎么做。如果它具有价值，它看起来就像它看起来很正常。

Javascript

    function initChartVendas() {
            am4core.useTheme(am4themes_animated);

            let chart = am4core.create(this.chartElement.nativeElement, am4charts.XYChart);
            chart.data = this.generatechartData();
            chart.numberFormatter.numberFormat = "'R$ ' #,###.##";

            // Create axes
            let dateAxis = chart.xAxes.push(new am4charts.DateAxis());
            dateAxis.startLocation = 0.5;
            dateAxis.endLocation = 0.5;
            dateAxis.extraMax = null;
            dateAxis.extraMin = null;
            dateAxis.dateFormats.setKey('day', 'dd');

            // Create value axis
            let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
            valueAxis.baseValue = 900;

            // Create series
            let series = chart.series.push(new am4charts.LineSeries());
            series.name = 'Pagos ';
            series.dataFields.valueY = 'valor';
            series.dataFields.dateX = 'dia';
            series.strokeWidth = 3;
            series.tooltipText = '{valueY.value}';
            series.fillOpacity = 0.1;
            series.tensionX = 0.8;
            series.tensionY = 1;
            series.fill = am4core.color('#5770ef');
            series.stroke = am4core.color('#5867dd');

            // Create series 2
            if (this.dataCancelados) {
                let seriesCancelados = chart.series.push(new am4charts.LineSeries());
                seriesCancelados.name = 'Cancelados ';
                seriesCancelados.dataFields.valueY = 'cancelado';
                seriesCancelados.dataFields.dateX = 'dia';
                seriesCancelados.strokeWidth = 3;
                seriesCancelados.tooltipText = '{valueY.value}';
                seriesCancelados.fillOpacity = 0.1;
                seriesCancelados.tensionX = 0.8;
                seriesCancelados.tensionY = 1;
                seriesCancelados.fill = am4core.color('#f96191');
                seriesCancelados.stroke = am4core.color('#fd397a');
            }

            // Add cursor
            chart.cursor = new am4charts.XYCursor();
            chart.cursor.behavior = 'none';

            series.tooltip.getFillFromObject = false;
            series.tooltip.adapter.add('x', (x, target) => {
                // @ts-ignore
                const valueY = series.tooltip.tooltipDataItem.valueY;
                if (valueY < 0) {
                    series.tooltip.background.fill = chart.colors.getIndex(4);
                } else {
                    series.tooltip.background.fill = am4core.color('#5770ef');
                }
                return x;
            });

            if (this.dataCancelados) {
                chart.legend = new am4charts.Legend();
            }
        }

图 1

图 2

4

1 回答 1

0

我找到了应该订购日期的解决方案。例如，在他们不是之前，20 日在 16 日之前出现。这就是问题所在。我的订购解决方案是这样的（只在当天很重要）

 chartData.sort((v1, v2) => (v1.dia.getDate() > v2.dia.getDate() ? 1 : -1));
于 2020-04-21T11:24:59.020 回答