軸リアルタイムのamcharts hh：mmをフォーマットする方法は？

Question

私はamchartを使用しています。リアルタイムチャートを作成し、x軸にminDate、maxDateを設定し、hh：mmにフォーマットします。私はminimumDate, maximumDate, "minPeriod" : "hh"を試しましたが、失敗します。

マイコード： demo1

demo2（flotチャートを使用）のようなリアルタイムチャートを作成するには、amchartを使用します。

ラベル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を使用することができます。

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

を、グラフを更新した後、あなたの日付範囲を維持するためには、あなたが呼び出す必要があります：このプラグインは、あなたのAmCharts後に次のスクリプトタグを追加する際に含まれ、あなたのcategoryAxisにminimumDateとmaximumDateプロパティを設定することができますプラグインの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