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 微秒)。
希望有一天这对某人有所帮助。
我正在根据此示例设置烛台图表:
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 微秒)。
希望有一天这对某人有所帮助。