JavaScriptとHTMLの課題です

解決済

質問者：akirakun1955
質問日時：2021/08/01 19:13
回答数：1件

課題
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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

参考程度に

No.1ベストアンサー

回答者： fujillin
回答日時：2021/08/01 22:07

こんばんは

ざっと眺めただけですけれど、いろいろありますねぇ・・・

ご質問には関係ありませんけれど、レイアウトが横に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で表示）を利用して、エラーの発生をチェックしたり、変数の内容を調べて、思う通りに動作しているかを確認してみてください。