如何格式化轴实时图表 hh:mm?

Question

我使用amchart，我想创建一个实时图表，并为x轴设置minDate，maxDate，并将其格式化为hh：mm。我尝试使用minimumDate, maximumDate, "minPeriod" : "hh"，但它失败了。

我的代码： 演示1.

我想使用 amchart 来构建一个实时图表，例如：demo2(使用flot chart)。

标签xaxis是静态的不运行，并累积数据。 请帮帮我！ 谢谢！

Answer 1

更新时间时，需要设置新的日期实例或单独的值。更新startDate变量会更新共享该日期对象的所有数据点，因为 AmCharts 不会克隆 dataProvider 中的日期对象。快速解决方法是使用 setMinutes 调用的毫秒时间戳结果，例如：

var newDate = startDate.setMinutes(startDate.getMinutes() + 10);
var visits = randomIntFromInterval(50, 100);
chartData.push({
date: newDate,
visits: visits
});

AmCharts 将在内部将毫秒值转换为新的 Date 对象。这应应用于生成和更新方法。

minPeriod应设置为数据点之间的最小时间段。当您以 10 分钟为增量添加数据时，这应该是"mm"，而不是"hh"。

默认情况下，categoryAxis不支持设置minimumDate和maximumDate，但是，您可以使用AmCharts的datePadling插件来添加此功能。当您在 AmCharts 包含以下内容后添加以下脚本标签时，此插件将允许您在categoryAxis中设置minimumDate和maximumDate属性：

<script src="//www.amcharts.com/lib/3/plugins/tools/datePadding/datePadding.min.js"></script>

为了在更新图表后保持日期范围，您必须调用插件的AmCharts.datePaddingProcess方法在重新绘制图表之前重新更新范围。

以下是使用datePadd插件后您的updateChart方法的外观：

function updateChart() {
var newDate = startDate.setMinutes(startDate.getMinutes() + 10);
var visits = randomIntFromInterval(50, 100);
chart.dataProvider.push({
date:newDate,
visits:visits
});
AmCharts.datePaddingProcess(chart, true);
chart.validateData();
}

以下是您的类别轴的外观：

"categoryAxis": {
"parseDates": true,
"gridAlpha": 0.15,
"axisColor": "#DADADA",
"minPeriod" : "mm",
"minimumDate": min,
"maximumDate": max
},

更新的小提琴