我使用amchart,我想创建一个实时图表,并为x轴设置minDate,maxDate,并将其格式化为hh:mm。我尝试使用minimumDate, maximumDate, "minPeriod" : "hh"
,但它失败了。
我的代码: demo1。
我想使用amchart构建一个实时图表,如:demo2(使用flot chart)。
标签xaxis静态不运行,并累积数据。 请帮帮我! 谢谢!
答案 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
不支持设置minimumDate
和maximumDate
,但是,您可以使用AmCharts“datePadding plugin添加此功能。在您的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
},