在amCharts 4中,可以使用DateAxis对象来处理真实间隙。以下是一个示例代码,演示如何使用DateAxis来处理真实间隙:
// 创建图表实例
var chart = am4core.create("chartdiv", am4charts.XYChart);
// 创建一个DateAxis对象
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
// 设置日期格式
dateAxis.dateFormats.setKey("day", "MM-dd");
dateAxis.periodChangeDateFormats.setKey("day", "MM-dd");
// 设置数据源
chart.data = [
{
date: new Date(2021, 0, 1),
value: 100
},
{
date: new Date(2021, 0, 2), // 有一个真实间隙
value: 200
},
{
date: new Date(2021, 0, 3),
value: 150
},
{
date: new Date(2021, 0, 4),
value: 300
}
];
// 创建一个ValueAxis对象
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// 创建一个LineSeries对象
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = "value";
series.dataFields.dateX = "date";
series.strokeWidth = 2;
// 设置图表的主题
chart.theme = am4themes_animated;
// 更新图表布局
chart.invalidateLayout();
在这个例子中,我们创建了一个DateAxis对象,并将其添加到图表的x轴。然后,我们设置了日期格式,以便正确显示日期。接下来,我们设置了图表的数据源,并创建了一个ValueAxis对象和一个LineSeries对象来显示数据。最后,我们使用am4themes_animated主题来美化图表,并调用invalidateLayout()方法来更新图表的布局。
通过使用DateAxis对象,amCharts 4可以正确处理真实间隙,并在图表中正确显示日期。