AmCharts 4 Разорвать, когда серия не имеет значения - PullRequest
Новая
       8

AmCharts 4 Разорвать, когда серия не имеет значения

0 голосов
/ 20 апреля 2020

У меня есть график с двумя «сериями», только когда один имеет значение, а другой нет, он ломается и не имеет фона. Как это исправить? Я перепробовал несколько постов с разных сайтов, видео, а также много читал документацию. Кажется, ни один пример не работает, поэтому я не знаю точно, что делать. Если оно имеет значение, оно выглядит как нормальное.

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

1 Ответ

0 голосов
/ 21 апреля 2020

Я нашел решение, даты должны быть заказаны. Например, до того, как их не было, 20-е пришло до 16-го. Вот почему проблема. Мое решение заказа это (это имеет значение только день) 

 chartData.sort((v1, v2) => (v1.dia.getDate() > v2.dia.getDate() ? 1 : -1));
...