如何格式化轴实时 amcharts hh:mm？

Question

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

我的代码： demo1。

我想使用 amchart 构建实时图表，例如：demo2（使用 flot 图表）。

标签 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的datePadding plugin来添加此功能。当您在 AmCharts 包含以下脚本标签后添加以下脚本标签时，此插件将允许您在 categoryAxis 中设置 minimumDate 和 maximumDate 属性：

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

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

使用 datePadding 插件后，您的 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 的样子：

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

Updated fiddle

如何格式化轴实时 amcharts hh:mm？

How to format axis real time amcharts hh:mm?

real-time

formatdatetime

amcharts