Google Chart APIでX軸の日付を使用する方法は?
-
06-07-2019 - |
質問
X軸の値が月の日になるように、GoogleチャートAPIでチャートをプロットする方法はありますか?
同じ頻度で提供されていないデータポイントがあります。例:
Date - Value
1/1/2009 - 100
1/5/2009 - 150
1/6/2009 - 165
1/13/2009 - 200
1/20/2009 - 350
1/30/2009 - 500
1か月間の時間に基づいた相対距離で各データポイントを分離するグラフを作成したい。これはExcelで実行できますが、Googleグラフで計算して表示するにはどうすればよいですか?
Googleチャートに類似した他の無料ソリューションまたはASP.NETで使用できる無料ライブラリも歓迎します。
解決
更新これは、高度なグラフ「注釈付きグラフ」を使用して、グラフAPIで直接サポートされるようになりました。機能- https://developers.google.com/chart/interactive/docs/ gallery / annotationchart
ReHashデータベース統計でこれを行いました チャート(日付が等間隔であることが判明したため、これが行われていることを正確に示していません)。
まず、全期間を取得します。これは、グラフの幅全体に類似しています。これを行うには、最新の日付から最も古い日付を減算します。 Unixエポックタイムスタンプは整数であり、この方法で比較しやすいため、使用することを好みますが、秒数などを簡単に計算できます。
今、データをループします。日付ごとに、日付が最初からの全体の期間のパーセンタイルが必要です(つまり、最も早い日付は0、最も遅い日付は100です)。各日付について、最初にデータセット内の最も早い日付から現在の日付の距離を計算します。基本的に、「最初からどれくらい離れているか」。したがって、現在の日付から最も早い日付を減算します。次に、パーセンタイルを見つけるために、現在の日付の距離を全体の期間で除算し、100を掛けて小数点を切り捨てまたは丸めて整数を求めます x座標。
それはそれと同じくらい簡単です! x値の範囲は0(グラフの左側)から100(右側)で、各データポイントは実際の時間的距離の開始点からの距離にあります。
ご不明な点がございましたら、お気軽にお問い合わせください!必要に応じて、擬似コードまたはPHPを投稿できます。
他のヒント
同じ問題があり、散布図が見つかりましたGoogle Chartでは、まさに必要なことを行います。
ここに私が結んだコードがあります(出発点としてそれらを取りました):
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Quantity');
data.addRow([new Date(2011, 0, 1), 10])
data.addRow([new Date(2011, 1, 1), 15])
data.addRow([new Date(2011, 3, 1), 40])
data.addRow([new Date(2011, 6, 1), 50])
// Create and draw the visualization.
var chart = new google.visualization.ScatterChart(
document.getElementById('visualization'));
chart.draw(data, {title: 'Test',
width: 600, height: 400,
vAxis: {title: "cr", titleTextStyle: {color: "green"}},
hAxis: {title: "time", titleTextStyle: {color: "green"}},
lineWidth: 1}
);
}
0から月をカウントするように見えることに注意してください。つまり、1月は0、2月は1、...、12月は11です。
高度なグラフでこれを実行できるようになりました:
http://code.google.com/apis/visualization/ documentation / gallery / annotatedtimeline.html
これはGoogleチャートで非常に簡単に実行できますが、アプリケーションでラベルを計算する必要があります
chxl chart x labelパラメーターが必要です。次の例では、y軸に50ステップの数字でラベルを付け、下部に日付を付けます
chxl=0:|0|50|100|150|200|250|300|350|400|450|500|1:|16/01/2009|26/01/2009|6/02/2009
ハイ。私はあなたと同じ線に沿って考えています。ラベルが互いに上書きする問題を予見でき、2つのアプローチしか考えられません。
1)形式(月/火、月/火、1月1日、1月1日、1月1日、2月29日、2010年2月14日など)に応じて、各日付の文字数を計算してから計算するグラフの幅全体に収まるラベルの数(ピクセル単位のchar幅(固定フォントの場合は簡単)、またはいくつかの試行錯誤)
もちろん、ラベルは任意のデータと直接一致する場合があります。
2)複数のX軸ラベルを使用して、日付を垂直に配置します。