如何格式化軸實時amcharts hh：mm？

我使用amchart，我想創建一個實時圖表，併爲x軸設置minDate，maxDate，並將其格式化爲hh：mm。我嘗試使用minimumDate, maximumDate, "minPeriod" : "hh"，但它失敗。如何格式化軸實時amcharts hh：mm？

我的代碼： demo1。

我想使用amchart來構建一個實時圖表，如：demo2（使用flot圖表）。

標籤xaxis是靜態的，沒有運行，並累積數據。請幫幫我！謝謝！

來源

2017-05-03 Ta No Bi

更新時間時，需要設置新的日期實例或單獨的值。更新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方法在重新繪製圖表之前重新更新範圍。

這是你的updateChart方法看起來就像使用datePadding插件後什麼：

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

來源

2017-05-03 11:31:08 xorspark

嗨@xorspark，謝謝你真是太棒了！這對我有用:)（y） –

如何格式化軸實時amcharts hh：mm？

回答

相關問題