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

时间:2017-05-03 03:57:05

标签: real-time amcharts formatdatetime

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

我的代码: demo1

我想使用amchart构建一个实时图表,如:demo2(使用flot chart)。

标签xaxis静态不运行,并累积数据。 请帮帮我! 谢谢!

1 个答案:

答案 0 :(得分:0)

更新时间时,需要设置新的日期实例或单独的值。更新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不支持设置minimumDatemaximumDate,但是,您可以使用AmCharts“datePadding plugin添加此功能。在您的AmCharts包含后添加以下脚本标记时,此插件允许您在minimumDate中设置maximumDatecategoryAxis属性:

<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