 |
ダウンロード |
※ 既にこちらの手順でcsv2tableなどを導入している場合は次の項目に進んで下さい。
以下のサイトからcsv2tableをダウンロードします。
csv2table
https://plugins.jquery.com/project/csv2table
赤枠で囲われたzipファイルへのリンクをクリックして下さい。
備考
「Download」のリンクはソースコード単体へのリンクです。
zipファイルのリンクはテーブル内で利用する矢印画像などが同梱されたもので、
それらも使用しますので、zipファイルをダウンロードして下さい。
csv2table-0.02-b-2.8.zip にある数字はバージョン番号です。
新しいバージョンの場合は上記スクリーンショットと数字等が異なりますが問題ありません。
| |
解凍と配置 |
ダウンロードしたzipファイルを解凍すると 「img」ディレクトリと、「js」ディレクトリが
出てきますので、これをディレクトリごとHTMLファイルと同じディレクトリにコピーします。
コピーした「js」ディレクトリに移動し、
jquery-1.3b2.js を jquery.js にリネームし、
jquery.csv2table-0.02-b-2.8.js を jquery.csv2talbe.js にリネーム、
jquery.jqchart-0.02-b-1.7.js を jquery.jqchart.js にリネームします。
備考
ファイル名の変更（リネーム）は説明の都合上行ったものです。
次項タグの挿入でバージョン番号を含めて指定すれば、リネームの必要はありません。
既に csv2tableとjqueryが導入済みの場合は jquery.jqchart.js のみリネームして下さい。
| |
ヘッダにタグを追加 |
ビルダーの 「編集」 → 「ページの属性」 とクリックし 「その他」のタブをクリックします。
「その他のHTMLタグ」 と記載された入力枠がありますので、そこへ以下のソースを追加します。
追加したら 「OK」 ボタンをクリックして下さい。
備考
直接HTMLソースに追記する場合は <head> 〜 </head> の間に追加します。
jQueryやcsv2tableが設置済みの場合は、その行を除くソースを貼り付けますが、
読み込む順番が上記のようになるよう整形して下さい。
「HTMLソース」に切り替えて先ほど貼り付けたソース（最上部あたりにあります）の
赤枠部分を修正します。
次項で表を出力する場所にレイアウト枠<div>を挿入してIDを付けますが、
これと同じIDを指定して下さい。
よく分からない場合は例と同じ sample1 のままで結構です。
Book2.csv となっている箇所は読み込むCSVファイル名を指定します。
今回はHTMLファイルと同じ場所にCSVファイルを配置したのでファイル名だけ指定します。
canvasMyID となっている部分は次項で挿入する<canvas>タグに付けるIDと
同じIDを指定します。
よく分からない場合は例と同じ canvasMyID のままで結構です。
| |
レイアウト枠 <div> の設置 |
表を配置したい場所を左クリックしてカーソルを表示させます。
そのまま「HTMLソース」をクリックして以下の2行を貼り付けて下さい。
備考
idはヘッダ内に貼り付けたソース内のid（#sample1の箇所）と同じものにします。
ヘッダ内のid指定を別のものにしていなければ、上記のソースでそのまま動作します。
height="300" の300はグラフの高さを指定する項目です。
出力するグラフに合わせて適時サイズを調整して下さい。
| |
<body>にonloadを追加 |
1. ビルダーの操作で行う場合
「編集」→ 「ページの属性」→「イベント」と選択し、
「イベント」から「OnLoad」をクリック、「スクリプト」の部分に以下の1行を貼り付けます。
その後、「登録」ボタンをクリック、「OK」ボタンを押して下さい。
2. 直接HTMLソースを編集する場合
HTMLソースを直接編集する場合は <body>行を探して onload="HPBGjqchart();" を追加します。
修正前
<body>
修正後
<body onload="HPBGjqchart();">
| |
CSVファイルの用意 |
Excelなどで作成しておき、出力する際に CSV（カンマ区切り）で出力します。
CSVファイルはHTMLファイルと同じディレクトリに配置しておきます。
サンプルで使用したCSVファイルは以下のものです。
https://aimix.jp/Book2.csv
| |
動作の確認 |
以上の操作でレイアウト枠を入れた箇所にグラフと表が出力されます。
「プレビュー」画面に切り替えて動作確認を行ってみましょう。
| |
オプション設定 |
オプション設定は以下のテキストファイルを見ながらHTMLソースを修正して下さい。
修正するのは「ヘッダにタグを追加」で追加した部分です。
オプション設定について（テキストファイル）
例
グラフ背景色を変更する場合は以下のように追加します。
修正前
function HPBGjqchart(){
$('#sample1').csv2table('Book2.csv',{
use : 'jqchart:line#canvasMyID',
title : '<B>グラフサンプル</B>',
titleTop : '0',
titleLeft: '0'
});
};
修正後
function HPBGjqchart(){
$('#sample1').csv2table('Book2.csv',{
use : 'jqchart:line#canvasMyID',
title : '<B>グラフサンプル</B>',
titleTop : '0',
titleLeft: '0',
bgGradient :{
from : '#ffffff', //グラフの背景グラデーション開始色（上）
to : '#dfdfdf' //グラフの背景グラデーション終了色（下）
}
});
};
※ 重要
各設定項目は titleTop : '0', のように末尾にカンマ（,）が付いていますが、
最後の項目（一番下の項目）にはカンマ付かない事に注意して下さい。
最後の項目にカンマが付いているとエラーが出て実行できません。
| |
動作しない場合は？ |
文字コードが異なっている場合
HTMLファイルと jquery.csv2table.js の文字コードが異なっている場合、
「プレビュー」の際などにエラーとなってしまいます。
jquery.csv2table.js はダウンロード時に UTF-8 ですので、HTMLファイルをUTF-8 にするか、
jquery.csv2table.js側をHTMLファイルの文字コードに合わせてやる必要があります。
HTMLファイル側を変更する場合は「ファイル」 → 「名前を付けて保存」 から 「出力漢字コード」を
jquery.csv2table.js と同じ漢字コードにします。
テキストエディタ TeraPad の場合 jquery.csv2table.js 側の文字コードを確認するには、TeraPadで
jquery.csv2table.js を開き 「ファイル」 → 「文字コード指定再読み込み」 をクリックして、選択状態（灰色）
になっている漢字コードを確認します。
jquery.csv2table.js側を変更する場合は上記TeraPadの場合、
「ファイル」 → 「文字/改行コード指定保存」 から漢字コードを指定して保存します。
文字化けしてしまう場合
出力はできるものの、文字が下のように化けてしまう場合、CSVファイルの文字コードが
HTMLファイルと異なっている可能性があります。
テキストエディタ TeraPad で文字コードを変更する場合は、
「ファイル」 → 「文字/改行コード指定保存」 から 文字コードを指定して保存します。
大抵の場合は Shift-JIS か UTF-8 ですので、どちらかで保存して確認して下さい。
表内の画像が×印になっている場合
jquery.csv2table.js が置かれているディレクトリ内に img ディレクトリがあり、
その中に icon-n.gif などが配置されている必要があります。
ソースコードだけダウンロードした場合は以下のページから .zip ファイルもダウンロードします。
配布されているzipファイル内にこれらの画像が同梱されています。
csv2table
https://plugins.jquery.com/project/csv2table
|
