0

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

我的代码： demo1。

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

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

4

1 回答 1

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不支持设置 a minimumDate，maximumDate但是，您可以使用 AmCharts 的datePadding 插件来添加此功能。当您在 AmCharts 包含以下脚本标签后添加以下脚本标签时，此插件将允许您在您的中设置一个minimumDate和maximumDate属性：categoryAxis

<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
  },

更新的小提琴

于 2017-05-03T11:31:08.197 回答