Amcharts 5条形图Race - valueAxis(在图表回放时重置)

Question

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

重启功能工作正常，除了:

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

从amcharts文档中，我很确定这些都是自动维护的(这可能是他们的示例比赛图表不包括重播选项的一个原因)。

这是第一年的样子(原始):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 ();
}