AmCharts v5:预缩放日期轴

AmCharts v5: pre-zooming date axis

我正在根据此示例设置烛台图表:

https://www.amcharts.com/demos/candlestick-chart/

我想做的是将图表预缩放到可用数据的最后 10%。在文档( https://www.amcharts.com/docs/v5/charts/xy-chart/zoom-and-pan/ )中,它说使用启动参数:

var xAxis = chart.xAxes.push(
  am5xy.DateAxis.new(root, {
    start: 0.9,
    renderer: am5xy.AxisRendererX.new(root, {})
  })
);

在此代码下方的注释中,它表示如果使用滚动条,请添加与图表日期轴中完全相同的起始偏移量。

因此,在我设置的示例代码中:

var xAxis = chart.xAxes.push(
  am5xy.DateAxis.new(root, {
    start: 0.95,
    groupData: true,
    maxDeviation:0.5,
    baseInterval: { timeUnit: "day", count: 1 },
    renderer: am5xy.AxisRendererX.new(root, {pan:"zoom"}),
    tooltip: am5.Tooltip.new(root, {})
  })
);

滚动条:

var sbxAxis = scrollbar.chart.xAxes.push(
  am5xy.DateAxis.new(root, {
    start: 0.95,
    groupData: true,
    groupIntervals: [{ timeUnit: "week", count: 1 }],
    baseInterval: { timeUnit: "day", count: 1 },
    renderer: am5xy.AxisRendererX.new(root, {
      opposite: false,
      strokeOpacity: 0
    })
  })
);

我什么都试过了。我尝试从 https://www.amcharts.com/docs/v5/charts/xy-chart/axes/category-date-axis/

xAxis.zoomToDates(new Date(2021, 0, 1), new Date(2022, 0, 1));

series.events.once("datavalidated", function(ev) {
  ev.target.get("xAxis").zoomToDates(new Date(2021, 0, 1), new Date(2022, 0, 1));
});

我尝试将“end: 1”添加到两个元素。运气不好。

请指教。非常感谢。

碰巧第二个选项是正确的并且工作正常。混淆与日期有关。图表的所有日期数据都在时间戳中,这导致了混乱。以防万一在这里发布最终结果 - 放大到数据的最后 130 条记录并在右侧添加额外的边距以获得一点“空气”:

series.events.once("datavalidated", function(ev) {

        //pre-zooming to last date
        
        var startDate = chartData[0].date;
        
        if(chartData.length >= 130){
            startDate = chartData[chartData.length - 130].date;
        }
        
        ev.target.get("xAxis").zoomToDates(new Date(startDate), new Date(chartData[chartData.length - 1].date + 600000));
    });

这里我们将第一个元素作为开始日期,如果有超过 130 条记录,我们只取那 130 条。在最后一行我将 600000 添加到最后一个日期(我有详细的图表,所以我添加 10 分钟:60 秒 * 10 分钟 * 1000 微秒)。

希望有一天这对某人有所帮助。