課題
100日間で10,000件のある利用履歴データがあります。
JavaScriptとHTMLでグラフを作成して可視化する
以下のようなファイルを作成し実行、sampleという文字をクリックするとグラフが作成されることになっていますが、グラフを作成することができません。
どなたかご助言をお願いします。
作成ファイル
➀logdata.js 履歴データ
データ構造
var dataset=[
{‘date':'1618930800000','type:':'4'},
{‘date':'1618930800000','type:':'4'},
{‘date':'1618930800000','type:':'5'},
中略
{‘date':'1627484400000','type:':'3'},
{‘date':'1627484400000','type:':'4'},
{‘date':'1627484400000','type:':'1'}
];
※1618930800000等は日付をミリ秒に変換
➁bar.png 50×50ピクセル程度の画像ファイル
➂logdata.html
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>sample</TITLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" SRC="logdata.js">
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" >
function showhistogram(argv)
{
var argv;
var i;
for(i=0;i<datalist.length;i++)
{
(argv==0)&&(document.images[i].height= parseInt( (epo{datelist[i]/max}*100)));
}
return 0;
}
</SCRIPT>
</HEAD>
<BODY>
<DIV onClick="showhistogram(0)">sample</DIV>
<HR>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
var i,j;
var max=0;
//
var epo=new Object();
for(i=0;i<dataset.length;i++)
{
(epo[dataset[i].date])||(epo[dataset[i].date]=0);
epo[dataset[i].date]++;
(max < epo[dataset[i].date])&&(max = epo[dataset[i].date]);
}
datelist=Object.keys(epo);
datelist.sort();
//
document.write( '<TABLE ID="table" BORDER="1">' );
document.write('<TR>');
for(i=0; i<datelist.length;i++)
{
document.write('<TH>');
var tar=new Date(eval(datelist[i]));
document.write( tar.getMonth()+1 );
document.write( '/' );
document.write( tar.getDate() );
document.write('</TH>');
}
document.write('</TR>');
document.write('<TR VALIGN="BOTTOM"> ALIGN="CENTER" HEIGHT="100">');
for(i=0; i<datelist.length;i++)
{
document.write('<TD><IMG SRC="bar.png" width="50" height="0"></TD>');
}
document.write('</TR>');
document.write( '<TABLE>' );
</SCRIPT>
</BODY>
</HTML>

No.1ベストアンサー
- 回答日時:
こんばんは
ざっと眺めただけですけれど、いろいろありますねぇ・・・
ご質問には関係ありませんけれど、レイアウトが横に100日分並べているようですが、50×100=5000pxの横幅になってしまいますけれど・・・
横棒グラフ形式にすれば、1行の高さ(仮に16pxとすれば)16×100=1600pxになるので、スクロールが減って見やすくなりそうに思いますけれど・・・
・・・というのは置いておくとして、気づいた点を列挙しておきます。
1)datasetの最初のクォーテーションが全て英数小文字になって
いないのでエラーとなり、データが読まれない
2)showhistogram関数は定義されているものの、使われていない
(グラフに高さが与えられることがないまま)
動作には関係ありませんが、変数argvにも意味があるとも思えない
3)同上関数内のループ制御の datalist は datelist のタイポと思われる
(未定義変数扱いになり、エラーになる)
4)画像の高さ制御の方法が正しくないので、値が変わらない
element.style.height = value + "px"
を用いるか、
element.setAttribute("height", value)
を用いるなどに修正が必要。
5)同上部分のepoの添え字の記法がおかしい({} の使用など)
(エラーになります)
6)document.write内のHTMLの記述がおかしい
(エラーにはならないが、表示がおかしくなる)
><TR VALIGN="BOTTOM"> ALIGN="CENTER" HEIGHT="100">
の部分。
上記あたりを修正すれば、ひとまず動作するのではと思いますけれど・・・
(いろいろありすぎるので、記入漏れがあるかもしれません)
ブラウザの開発ツール(大抵のブラウザならF12で表示)を利用して、エラーの発生をチェックしたり、変数の内容を調べて、思う通りに動作しているかを確認してみてください。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript GoogleChart 階層ごとのブロックの長さを個別に設定したい 1 2022/07/06 14:27
- CGI perlで書いたcgiでsqliteの使い方を教えてください 2 2023/05/08 21:29
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript gasについて 1 2022/05/31 21:51
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- JavaScript javascriptでテーブルに追加した項目のid追加してローカルストレージを操作したい 5 2023/01/01 15:52
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
window.openでタイトル名の指定
-
parseIntで戻り値がNaNになるの...
-
JavaScript window.openで開く...
-
同じIDで定義した要素の配列を...
-
javascriptでiframeのURL変更は?
-
ボタンをクリックすると数が増...
-
jspからjavascriptの変数引継ぎ
-
functionから別のfunctionを実...
-
C#で、ContextMenuStripに動的...
-
クリックすると上に開くアコー...
-
画像上のクリックした場所が分...
-
undefinedを表示させない方法は...
-
webページ上のTabキーの動き
-
var_dumpのdump意味はを知りた...
-
hoge の謎
-
Boolean型配列中のTrueの有無を...
-
Inherits EventArgsの初期化
-
配列の初期化
-
C#OpenCv V4にのエラーに関する...
-
javascriptで編集可能不可能の...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
○歳△ヶ月と×日を計算してくれる...
-
window.openでタイトル名の指定
-
テキストボックスに入力された...
-
Formの値を別のフレームで使いたい
-
記述の仕方を教えて下さい。
-
ジャバスクリプトで空白(スペー...
-
今日の月と日付の1週間後や3日...
-
文字列を時間で入れ替え
-
Javascriptにてページ作成
-
文字サイズ変更ボタンを設置し...
-
iframe内に特定の文字列がある...
-
Cookieの使い方が分からない。
-
for文のiを使ってリンク先のア...
-
promptで入力されたデータをテ...
-
指定した時間になると現れるリンク
-
ウェブ上にキーボードを作りた...
-
innerHTMLにて設定した情報を再...
-
JavaScript 変数をメソッドに代...
-
javscript超初心者です。
-
ブラウザの履歴がおかしくなり...
おすすめ情報
