on图5条形图竞赛- valueAxis (重设图表重放)

Question

这是一个很长的尝试-我修改了现成的图表5条形图(比赛)-除其他外，我添加了一个暂停/播放按钮，其中包括一个重放选项，重新启动图表从第一年。

重新启动函数可以正常工作，只是：

• valueAxis (xAxis)每年不断更新，其最大值为该年的最大值。
• valueAxis保持一个高水值(任何一年中最高值之一)。当我重新启动图表时，它不会将valueAxis重置为最初的第一年值，这使得图表看起来有点奇怪(每个类别的列都被压缩)。

我确信这都是自动维护的(也许是因为他们的样本竞赛图没有包含重播选项)。

以下是第一年的样子(原文)：https://imtanuki.tinytake.com/msc/NzA5NDA4MV8xOTg0MjE5OQ

下面是第一年的样子(重新启动后)：https://imtanuki.tinytake.com/msc/NzA5NDA4Ml8xOTg0MjIwMA

我的问题-是否有任何方法来跟踪第一年的valueAxis最大值，并在重新启动时将valueAxis重置为该值？

这里有很多代码，所以只有突出的部分.

主要逻辑(播放/暂停/重播)

        function initEventListenerPlayButton () {
        playButton.events.on ( "click", function ( event ) {
                switch ( chartState.state ) {
                    case "NOT STARTED":
                        togglePlayButtonUpdate ("PLAYING", "PAUSE")
                        yearCurrent = yearMin;
                        // recalibrate xAxis
                        togglePlayButtonPlay ();
                        togglePlayButtonSort ();
                        break;
                    case "PAUSED":
                        togglePlayButtonUpdate ("PLAYING", "PAUSE")
                        togglePlayButtonPlay ();
                        togglePlayButtonSort ();
                        break;
                    case "PLAYING":
                        togglePlayButtonUpdate ("PAUSED", "PLAY")
                        togglePlayButtonPause ();
                        break;
                    default:
                    // nothing
                }
            }
        )
    }

系列逻辑(我认为valueAxis是在这里更新的)

        function initAmchartSeries () {
        // init series
        // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
        let series = chart.series.push ( am5xy.ColumnSeries.new ( root, {
            xAxis: xAxis,
            yAxis: yAxis,
            valueXField: "value",
            categoryYField: "categoryItem"
        } ) );

        // init column border radius - top and bottom right
        series.columns.template.setAll ( {
            height: am5.percent ( 90 ),
            cornerRadiusBR: 4,
            cornerRadiusTR: 4
        } );

        //init column column colors
        series.columns.template.adapters.add ( "fill", function ( fill, target ) {
            return chart.get ( "colors" ).getIndex ( series.columns.indexOf ( target ) );
        } );

        // column stroke color - don't use chart colors
        //  series.columns.template.adapters.add ( "stroke", function ( stroke, target ) {
        //  return chart.get ( "colors" ).getIndex ( series.columns.indexOf ( target ) );
        // } );

        // column stroke color - override
        series.columns.template.adapters.add ( "stroke", () => {
            return am5.color ( 0x0060AF );
        } );

        // column stroke width and opacity - override
        series.columns.template.adapters.add ( "strokeWidth", () => {
            return 1;
        } );

        series.columns.template.adapters.add ( "strokeWeight", () => {
            return 100;
        } );

        // init label bullet
        series.bullets.push ( function () {
            return am5.Bullet.new ( root, {
                locationX: 1,
                sprite: am5.Label.new ( root, {
                    text: "{valueXWorking.formatNumber('#.# a')}",
                    fill: root.interfaceColors.get ( "alternativeText" ),
                    centerX: am5.p100,
                    centerY: am5.p50,
                    populateText: true
                } )
            } );
        } );

        return series;
    }

更新逻辑(用于每年)

        function updateData () {
        var itemsWithNonZero = 0;

        if ( dataYears[ yearCurrent ] ) {
            label.set ( "text", yearCurrent.toString () );

            am5.array.each ( series.dataItems, function ( dataItem ) {
                var category = dataItem.get ( "categoryY" );
                var value = dataYears[ yearCurrent ][ category ];

                if ( value > 0 ) {
                    itemsWithNonZero ++;
                }

                dataItem.animate ( {
                    key: "valueX",
                    to: value,
                    duration: stepDuration,
                    easing: am5.ease.linear
                } );
                dataItem.animate ( {
                    key: "valueXWorking",
                    to: value,
                    duration: stepDuration,
                    easing: am5.ease.linear
                } );
            } );

            yAxis.zoom ( 0, itemsWithNonZero / yAxis.dataItems.length );
        }
    }

Answer 1

这是工作-它将重置系列和x轴，以便图表将重新显示完全相同，每次它被重放。

        function togglePlayButtonReInit () {
        // recalibrate xAxis
        chart.yAxes.removeIndex ( chart.yAxes.indexOf ( yAxis ) );
        chart.xAxes.removeIndex ( chart.xAxes.indexOf ( xAxis ) );
        chart.series.removeIndex ( chart.series.indexOf ( series ) );
        yAxis = initAmchartYAxis ();
        xAxis = initAmchartXAxis ();
        series = initAmchartSeries ();
        setInitialData ();
    }