为什么我的 LineSeries 在放大时不显示？

如何解决为什么我的 LineSeries 在放大时不显示？

我在 React 中有一个带有 3 Line 系列的图表。它们看起来很完美，但是当我放大时，线条消失了。更奇怪的是，当我将光标放在图表中时，我可以看到这些点仍然存在。它们只是不可见。

我使用 AM Charts demo 创建我的图表。 这是我的代码：

    useLayoutEffect(() => {
        let chart = am4core.create("chartdiv",am4charts.XYChart);

        // Increase contrast by taking evey second color
        chart.colors.step = 2;

        chart.paddingRight = 1;

        chart.dateFormatter.inputDateFormat = "dd-MM-yyyy H:m:s";
        chart.dateFormatter.dateFormat = "d-M H:m:s";
        chart.data = props.data;
        var dateAxis = chart.xAxes.push(new am4charts.DateAxis());

        if (chart.data.length > 289) dateAxis.groupData = true;

        /**
         * Creation of custom y axis
         */
        let myAxis = chart.yAxes.push(new am4charts.ValueAxis());
        myAxis.renderer.opposite = true;
        myAxis.baseValue = 0;
        myAxis.min = -100;
        myAxis.max = 100;
        myAxis.strictMinMax = false;
        myAxis.numberFormatter = new am4core.NumberFormatter();
        myAxis.minWidth = 60;
        myAxis.numberFormatter.numberFormat = "#' %'";
        myAxis.layout = "absolute";
        myAxis.title.text = "TITLE";
        myAxis.title.align = "left";
        myAxis.title.valign = "top";
        myAxis.title.rotation = 0;
        myAxis.title.dy = -30;
        myAxis.title.fontWeight = 600;
        myAxis.renderer.line.strokeOpacity = 1;
        myAxis.renderer.line.strokeWidth = 2;
        myAxis.renderer.line.stroke = series.stroke;
        myAxis.renderer.opposite = opposite;

        function createMySeries(field,name,opposite,bullet) {
            var series = chart.series.push(new am4charts.Lineseries());
            series.datafields.valueY = field;
            series.datafields.dateX = "date";
            series.strokeWidth = 2;
            series.yAxis = myAxis;
            series.name = name;
            series.tooltipText = "{name}: [bold]{valueY}%[/]";
            series.tensionX = 0.8;
            series.showOnInit = true;

            var interfaceColors = new am4core.InterfaceColorSet();

            switch (bullet) {
                case "triangle":
                    var bullet = series.bullets.push(new am4charts.Bullet());
                    bullet.width = 12;
                    bullet.height = 12;
                    bullet.horizontalCenter = "middle";
                    bullet.verticalCenter = "middle";

                    var triangle = bullet.createChild(am4core.Triangle);
                    triangle.stroke = interfaceColors.getFor("background");
                    triangle.strokeWidth = 2;
                    triangle.direction = "top";
                    triangle.width = 12;
                    triangle.height = 12;
                    break;
                case "rectangle":
                    var bullet = series.bullets.push(new am4charts.Bullet());
                    bullet.width = 10;
                    bullet.height = 10;
                    bullet.horizontalCenter = "middle";
                    bullet.verticalCenter = "middle";

                    var rectangle = bullet.createChild(am4core.Rectangle);
                    rectangle.stroke = interfaceColors.getFor("background");
                    rectangle.strokeWidth = 2;
                    rectangle.width = 6;
                    rectangle.height = 12;
                    break;
                default:
                    var bullet = series.bullets.push(new am4charts.CircleBullet());
                    bullet.circle.stroke = interfaceColors.getFor("background");
                    bullet.circle.strokeWidth = 2;
                    break;
            }
            myAxis.renderer.labels.template.fill = series.stroke;
        }

            for (let i = 0; i < props.myArr.length; i++) {
                let icon = "circle";
                if (i === 1) {
                    icon = "triangle";
                } else if (i === 2) {
                    icon = "rectangle";
                }
                createMySeries(props.myArr[i],"VALUE => " + props.myArr[i],true,icon);
            }
        }

        /**
         * Hide negative values of soc y axis
         */
        myAxis.renderer.labels.template.fill = "#f1c705";
        myAxis.renderer.labels.template.fontWeight = 600;
        myAxis.renderer.labels.template.adapter.add("text",(label,target,key) => {
            if (target.dataItem && target.dataItem.value < 0) {
                return "";
            } else {
                return label;
            }
        });

        myAxis.cursorTooltipEnabled = false;
        chart.cursor = new am4charts.XYCursor();
        // Add legend
        chart.legend = new am4charts.Legend();
        chart.legend.position = "top";
        chart.legend.itemContainers.template.paddingBottom = 15;
        // chart.scrollbarX = new am4core.Scrollbar();

        chartRef.current = chart;

        return () => {
            chart.dispose();
        };
    },[props.data]);

这里有什么问题？示例中没有更多内容来处理缩放事件。它通常工作正常...我该怎么办？

解决方法

正如 xorspark 所建议的，我的数据没有正确排序。现在按日期排序，效果很好。