http://www.html5.jp/library/graph_vbar.html

こちらのサイトを参考にグラフを作成しています。

<script type="text/javascript">
window.onload = function() {
var g = new html5jp.graph.vbar("sample");
if( ! g ) { return; }
var items = [
["商品A", 20, 58, 40, 14, 38, 20, 40],
["商品B", 10, 14, 58, 80, 70, 90, 20],
["商品C", 10, 14, 58, 80, 70, 90, 20],
["商品D", 10, 14, 58, 80, 70, 90, 20],
["商品E", 10, 14, 58, 80, 70, 90, 20]
];
var params = {
x: ["曜日", "日", "月", "火", "水", "木", "金", "土"],
y: ["注文数(個)"]
};
g.draw(items, params);
};
</script>

を外部ファイル化して記載し
同階層htmlファイル<head>内に
<script type="text/javascript" src="graph.js"></script>

と記載しましたがうまく表示されません。

解説ページに
「HTMLファイルと分離しても構いません。しかし、サンプルのように、onloadイベントハンドラを使うなどして、ブラウザがHTMLを読み込んでから処理が実行されるようにしてください。」
と書いてありますが、

つまる所htmlファイルに何を記述すればよいのでしょうか?

どなたかご教授よろしくお願いいたします。

回答の条件
  • 1人5回まで
  • 登録:2008/01/22 09:16:21
  • 終了:2008/01/23 19:36:47

ベストアンサー

id:adu No.3

adu回答回数8ベストアンサー獲得回数12008/01/23 11:10:18

ポイント40pt

xCaptionColor: ["#666666"],

上記行の「:」後ろが日本語スペースになってます。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

上記行からHTMLの方は「utf-8」の指定になっています。

「graph.js」を外部ファイルにする際にShift-JIS等で保存されたため

日本語スペースがスペースと解釈されずに動作しなかったと思われます。

id:kazuhiko11

ありがとうございます。

見事解決いたしました!

2008/01/23 19:33:25

その他の回答(3件)

id:Mars No.1

Mars回答回数203ベストアンサー獲得回数202008/01/22 12:09:50

ポイント10pt

元のページ(http://www.html5.jp/library/graph_vbar.html)の解説がわかりづらければ、

[実際のサンプルを見る]

というリンクがいくつかあります。

それらのサンプルページを開いてソースを表示してみてはどうでしょう?

id:kazuhiko11

サンプルソースは<head>内部に直接記述されています。

直接記述する際にはうまく表示をされるので、

外部ファイル化した際のソースの記述方法が知りたいです。

2008/01/22 13:29:57
id:Mars No.2

Mars回答回数203ベストアンサー獲得回数202008/01/22 15:59:47

ポイント20pt

質問の意図を理解してませんで失礼しました。

・外部ファイル化した時、先頭のscript文と末尾の /scriptは除いてますか?

・ファイル保存時の文字コードは合わせてありますか?

これで解決できなければ

環境(OSとブラウザの種類、バージョン)、

うまくいかないとはどういう状況なのかを具体的に…

エラーが出てるならエラーメッセージ、表示がおかしいならどうおかしいか、等々

を教えてください。

(当方でも試してみましたが別ファイル化しても問題ありませんでした)

id:kazuhiko11

再びのご回答恐れ入ります。

Javascriptにあまり詳しくないので、サンプルソースを直接記載させていただきます。

外部化させない場合にはIE6・Firefoxともに正しく表示されていました。

<htmlファイル>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta http-equiv="Content-Language" content="ja" />

<meta http-equiv="Content-Style-Type" content="text/css" />

<meta http-equiv="Content-Script-Type" content="text/javascript" />

<link rel="stylesheet" type="text/css" href="base.css">

<title>棒グラフ(垂直) サンプル 1 - jsライブラリ - HTML5.JP</title>

<script type="text/javascript" src="html5jp/graph/vbar.js"></script>

<script type="text/javascript" src="graph.js"></script>

</head>

<body>

<canvas width="500" height="300" id="sample"></canvas>

</body>

</html>


<graph.jsファイル(同ディレクトリ)>

window.onload = function() {

var g = new html5jp.graph.vbar("sample");

if( ! g ) { return; }

var items = [

["売上", 59, 169, 213, 300, 540, 1000]

];

var params = {

x: ["年度別", "2003年", "2004年", "2005年", "2006年", "2007年", "2008年(予測)"],

y: ["売上高(百万円)"],

barShape: ["square"],

//棒グラフの形状"square"(角柱)、"cylinder"(円中)、"flat"(平坦影あり)、"line"(平坦影なし)

barColors: ["#FF9900"],

//バーの色

xAxisWidth: [2],

//X軸の太さ

xScaleColor: ["#666666"],

//x軸の目盛の色

xScaleFontSize: ["10px"],

//x軸のフォントサイズ

xScaleFontFamily:["Arial,sans-serif"],

//x軸の目盛フォント

yScaleColor: ["#666666"],

//y軸のフォントの色

yScaleFontSize: ["10px"],

//y軸のフォントサイズ

yScaleFontFamily: ["Arial,sans-serif"],

//y軸のフォント

xCaptionColor: ["#666666"],

//X軸のタイトルの色

xCaptionFontSize: ["12px"],

//X軸のタイトルの文字サイズ

xCaptionFontFamily: ["Arial,sans-serif"],

//x軸のタイトルのフォント

aLineWidth: [2],

//補助線の太さ

dLabelColor: ["#666666"],

//棒の上の文字の色

dLabelFontSize: ["12px"],

//網の上の文字のサイズ

//凡例の表示

legend: [true]

};

g.draw(items, params);

};

もしかしたら単純な記述ミスかもしれません。

どうぞよろしくお願いいたします。

2008/01/22 16:33:53
id:adu No.3

adu回答回数8ベストアンサー獲得回数12008/01/23 11:10:18ここでベストアンサー

ポイント40pt

xCaptionColor: ["#666666"],

上記行の「:」後ろが日本語スペースになってます。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

上記行からHTMLの方は「utf-8」の指定になっています。

「graph.js」を外部ファイルにする際にShift-JIS等で保存されたため

日本語スペースがスペースと解釈されずに動作しなかったと思われます。

id:kazuhiko11

ありがとうございます。

見事解決いたしました!

2008/01/23 19:33:25
id:Mook No.4

Mook回答回数1312ベストアンサー獲得回数3912008/01/23 14:35:17

ポイント20pt

おもしろいライブラリですね。

試しにやってみましたが、下記の変更で動作しました。


★2のライブラリのパスは、設置環境とあわせてください。

<html>
<head>
<!-- ★1 URF-8 から sjis に変更。必要かどうかは不明。 -->
<meta http-equiv="Content-Type" content="text/html; charset=sjis" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="stylesheet" type="text/css" href="base.css">
<title>棒グラフ(垂直) サンプル 1 - jsライブラリ - HTML5.JP</title>
<!-- ★2 下記を追加 : IE はこれが無いと動かないです。 -->
<!--[if IE]><script type="text/javascript" src="./graph_vbar/html5jp/excanvas/excanvas.js"></script><![endif]-->
<script type="text/javascript" src="./graph_vbar/html5jp/graph/vbar.js"></script>

<!-- ★3 外部ファイルパス -->
<script type="text/javascript" src="graph.js"></script>
</head>
<body>
<!-- ★4 div を追加 -->
<div><canvas width="400" height="300" id="sample"></canvas></div>
</html>

js は変更しませんでした。

サイトの説明にもあるように、★4の div タグは無いと表示されないようです。

id:kazuhiko11

そうなんです。

たかがグラフなのですがどうしてもこれを表示させたくて。

解決いたしました。

ありがとうございます。

2008/01/23 19:35:51

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません