要解决Amchart4在解析结束事件之前不显示来自JSON文件的Datatime的问题,可以使用以下代码示例:
// 创建图表实例
var chart = am4core.create("chartdiv", am4charts.XYChart);
// 从JSON文件加载数据
chart.dataSource.url = "data.json";
chart.dataSource.parser = new am4core.JSONParser();
chart.dataSource.parser.options.dateFormat = "yyyy-MM-dd HH:mm:ss";
// 数据加载完成时的事件处理程序
chart.dataSource.events.on("parseended", function(ev) {
// 获取解析后的数据
var data = ev.target.data;
// 将数据添加到图表的数据源
chart.data = data;
// 创建日期时间类别轴
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
// 配置日期时间类别轴的格式
dateAxis.dateFormats.setKey("minute", "HH:mm");
dateAxis.periodChangeDateFormats.setKey("minute", "HH:mm");
dateAxis.periodChangeDateFormats.setKey("hour", "HH:mm");
dateAxis.periodChangeDateFormats.setKey("day", "MM-dd");
dateAxis.periodChangeDateFormats.setKey("month", "MM-dd");
dateAxis.periodChangeDateFormats.setKey("year", "yyyy-MM");
// 创建值类别轴
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// 创建折线图系列
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.dateX = "date";
series.dataFields.valueY = "value";
// 创建光标
chart.cursor = new am4charts.XYCursor();
});
// 开始加载数据
chart.dataSource.load();
在上述示例中,我们首先创建了一个图表实例,并将其数据源的URL设置为“data.json”。然后,我们使用am4core.JSONParser配置数据源解析器的日期时间格式为“yyyy-MM-dd HH:mm:ss”。
接下来,我们使用“parseended”事件处理程序来处理数据加载完成时的事件。在事件处理程序中,我们从数据源的解析结果中获取数据,并将其添加到图表的数据源中。
然后,我们创建了一个日期时间类别轴,并配置了日期时间格式。接着,我们创建了一个值类别轴和一个折线图系列,并将数据绑定到系列的日期和值字段。
最后,我们创建了一个光标来显示鼠标悬停位置的数据点的详细信息。
最后,我们调用图表的dataSource.load()方法开始加载数据。