人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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ファイルに何を記述すればよいのでしょうか?

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


●質問者: kazuhiko11
●カテゴリ:ウェブ制作
✍キーワード:Draw HTML イベントハンドラ グラフ サイト
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● Mars
●10ポイント

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

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

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

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

◎質問者からの返答

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

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

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


2 ● Mars
●20ポイント

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

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

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

これで解決できなければ

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

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

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

を教えてください。

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

◎質問者からの返答

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

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);

};

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

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


3 ● adu
●40ポイント ベストアンサー

xCaptionColor: ["#666666"],

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

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

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

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

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

◎質問者からの返答

ありがとうございます。

見事解決いたしました!


4 ● Mook
●20ポイント

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

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


★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 タグは無いと表示されないようです。

◎質問者からの返答

そうなんです。

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

解決いたしました。

ありがとうございます。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ