
課題
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で質問しましょう!
関連するカテゴリからQ&Aを探す
今、見られている記事はコレ!
-
弁護士が解説!あなたの声を行政に届ける「パブリックコメント」制度のすべて
社会に対する意見や不満、疑問。それを発信する場所は、SNSやブログ、そしてニュースサイトのコメント欄など多岐にわたる。教えて!gooでも「ヤフコメ民について」というタイトルのトピックがあり、この投稿の通り、...
-
弁護士が語る「合法と違法を分けるオンラインカジノのシンプルな線引き」
「お金を賭けたら違法です」ーーこう答えたのは富士見坂法律事務所の井上義之弁護士。オンラインカジノが違法となるかどうかの基準は、このように非常にシンプルである。しかし2025年にはいって、違法賭博事件が相次...
-
釣りと密漁の違いは?知らなかったでは済まされない?事前にできることは?
知らなかったでは済まされないのが法律の世界であるが、全てを知ってから何かをするには少々手間がかかるし、最悪始めることすらできずに終わってしまうこともあり得る。教えてgooでも「釣りと密漁の境目はどこです...
-
カスハラとクレームの違いは?カスハラの法的責任は?企業がとるべき対応は?
東京都が、客からの迷惑行為などを称した「カスタマーハラスメント」、いわゆる「カスハラ」の防止を目的とした条例を、全国で初めて成立させた。条例に罰則はなく、2025年4月1日から施行される。 この動きは自治体...
-
なぜ批判コメントをするの?その心理と向き合い方をカウンセラーにきいた!
今や生活に必要不可欠となったインターネット。手軽に情報を得られるだけでなく、ネットを介したコミュニケーションも一般的となった。それと同時に顕在化しているのが、他者に対する辛らつな意見だ。ネットニュース...
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
JavaScriptとHTMLの課題です
-
イベントが初めの一回しか起き...
-
関数名をテキストから読み込む...
-
google apps scriptの終了のさせ方
-
配列の大括弧と丸括弧はどう違う?
-
シューティングゲームの作り方
-
setTimeoutによる繰り返しが途...
-
jspからjavascriptの変数引継ぎ
-
配列の1要素を代入した変数を使...
-
[初心者]javascriptのfor文でな...
-
htaccessのリダイレクトがルー...
-
Matlabで自作関数をオーバーロード
-
Boolean型配列中のTrueの有無を...
-
APIを使って埋め込んだグーグル...
-
Ajaxにおける非同期通信で、数...
-
IE11だけ、currentTimeが効きま...
-
javascriptのreplaceについて
-
食材の期限を管理するためにGAS...
-
vb.netでの記述方法について 以...
-
Vb.netのグローバル変数の宣言...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
window.openでタイトル名の指定
-
ウェブ上にキーボードを作りた...
-
○歳△ヶ月と×日を計算してくれる...
-
java scriptでの表示件数の制御...
-
ジャバスクリプトで空白(スペー...
-
時間帯によって背景画像を変える
-
javascript 初心者です 変数に...
-
引数を渡さずに呼び出し元の変...
-
JavaScriptとHTMLの課題です
-
ホームページに日付を自動更新...
-
ブラウザ、OSによってCSSを使い...
-
document.writeで画面が消える
-
「分」単位で加算(減算)したい。
-
フレームページに文字を書き込...
-
JavaScript を一行で記述する方法
-
Javascriptで動的にテーブル表...
-
更新でランダムでページ内のテ...
-
テーブルもしくセルの背景をラ...
-
今日の月と日付の1週間後や3日...
-
変数を送る方法?(CGIの「**.cgi...
おすすめ情報