jQuery.Gantt

jQuery.Gantt Gantt chart jQuery PHP

いよいよjQuery.Ganttをいじり始める。
パイオニアのサンプルとおりに打ち込んだら、その通り動くも、
自分のページ群の中に組み込んだら、画面にチャートが現われない。

ヘッダの部分のちょっとした違いかと思うのだが、何がポイントなのかを少し追求してみる。（続く‥）

【続き１】

１行目、サンプルでは

<!doctype html>

となっているが、これを、普段使っている（あまり意味を厳密には考えてないがｗ）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

に戻しても、チャートは表示される。これは問題ではない。（続く‥）

【続き２】

２行目、サンプルでは、

<html lang="en-au">

と言語を指定しているが、これを指定せず、

<HTML>

に戻しても、チャートは表示される。これは問題ではない。（続く‥）

【続き３】

<head>や<title>

は問題なく、次に気になったこれらに続く、

<meta charset="utf-8">

を、

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

に戻しても、チャートは表示される。これは問題ではない。（続く‥）

【続き４】

引き続いて、サンプルには、

<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" >

というタグがあるのであるが、これに該当するものが、自分のこれまでのヘッダ要素にはない。
そこで、これを外してみたところ、チャートが表示されなくなった。
ここに一つの結論を得た。このメタタグが表示に重要な役割を果たす。（続く‥）

【続き５】

このメタタグのヘッダ要素中での順番に重要だということが分かった。

  • 上記メタタグを、ヘッダの最後尾に追加したらチャートは表示されない。
  • チャートが表示されている状態で、上記メタタグの前に一つでもLINKタグ（スタイルシートファイルの指定）を置くと、チャートが表示されなくなる。

検索すると、この挙動には割と分かりやすい理由があるようだ。
http://d.hatena.ne.jp/oknknic/20110705/1309876591
http://subtech.g.hatena.ne.jp/mayuki/20110423/1303554462
なので、ヘッダ内の順序は、文字コード指定のMETA、これ、TITLE、他のMETA、LINK、‥
とするといいようだ（参考）。（続く‥）

【続き６】

ヘッダには、この後、jQuery.Gantt用のCSS記述が続くが、一旦保留（後に戻る）
また、BODY中には、本質的に

<div class="contain">
<div class="gantt"></div>
</div>

だけあればよく、前者のクラス名はヘッダに追加する部分に書かれているため名前変更可。


さて、その他のチャート本編の記述は

</BODY>と</HTML>の間

に書かれている。
その先頭に書かれているタグは、jQueryの本体となっている。

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

これは、既に他のjQueryがヘッダに書かれている場合に重複するのではないか？
この辺、よく分からないが、より新しい版（jquery-1.8.3.min.js）でdatepickerを
使ったりする前提があるので、確認する必要がある。


結論から言えば、この下部領域（仮にフッタとここでは呼ぶ）の先頭にある
jQuery本体のスクリプトファイルを消して、より新しい版をヘッダに記述しても、
きちんとチャートは表示されているように見える。両立できる可能性が高い。
但し、どうも余計なスタイルファイルが影響してか、デザインがおかしくなっている。（続く‥）

【続き７】

ヘッダの２つのスタイルシートと直接記述、

        <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" />
        <link rel="stylesheet" href="http://taitems.github.com/UX-Lab/core/css/prettify.css" />
		<style type="text/css">
			【略】
		</style>

及び、対応するフッタの３つのJavaScript

	<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
	<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-popover.js"></script>
	<script src="http://taitems.github.com/UX-Lab/core/js/prettify.js"></script>

prettyPrint();

は、チャート表示には不要で、外すとレイアウトはだいぶましになった。
（それでも重なるとまだ変だけど、これはdatepickerも前から変なとこあったし保留）
サンプルにはない、曜日の和文化をする。月（“months”）の和文化と同様に“dow”に対して行なえばｏｋ。
次は、色指定について調べる。（続く‥）

【続き８】バーの色追加

元々サンプルに記載されていたのは次の４種類。なぜか“customClass”へ指定する。

ganttRed、ganttGreen、ganttOrange、ganttBlue
（補足）「“customClass”へ指定する」とは

http://taitems.github.com/jQuery.Gantt/
によれば、バーの情報は「source: "ajax/data.json"」のJSONデータとして指定するみたいだが、
その構造で、「values: [ ... ]」という連想配列データ（オブジェクト）の配列要素が、それぞれ個々のバーのようだ。
更にその連想配列要素の構造の中で、キーが“customClass”である要素に上記色指定の文字列をセットすることで色が定まる。たとえば、

customClass: "ganttOrange"

のように。

（【続き８】の続き）

色を増やせないものかと、gantt●●の●●の部分をいろいろ変えて試してみると、
全て「ganttBlue」と同じになってしまった。
これは、ソースを眺めて、その定義がスタイルファイル『css/style.css』にあることが分かった。

.fn-gantt .bar {
    background-color: #D0E4FD;
    height: 18px;
    margin: 4px 3px 3px 3px;
    position: absolute;
    z-index: 10;
    text-align: center;
        -webkit-box-shadow: 0 0 1px rgba(0,0,0,0.25) inset;
        -moz-box-shadow: 0 0 1px rgba(0,0,0,0.25) inset;
        box-shadow: 0 0 1px rgba(0,0,0,0.25) inset;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
}

.fn-gantt .bar .fn-label {
    line-height: 18px;
    font-weight: bold;
    white-space: nowrap;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    text-shadow: 0 1px 0 rgba(255,255,255,0.4);
    color: #414B57 !important;
    text-align: center;
    font-size: 11px;
}

.fn-gantt .ganttRed {
    background-color: #F9C4E1;
}
.fn-gantt .ganttRed .fn-label {
    color: #78436D !important;
}

.fn-gantt .ganttGreen {
    background-color: #D8EDA3;
}
.fn-gantt .ganttGreen .fn-label {
    color: #778461 !important;
}

.fn-gantt .ganttOrange {
    background-color: #FCD29A;
}
.fn-gantt .ganttOrange .fn-label {
    color: #714715 !important;
}

つまり、『Red』『Green』『Orange』だけ別途定義していて、それ以外はすべて同じ色になるということ（“Blue”という指定名はダミーだ）
試しに、Orangeの記述をコピーして、Yellowと書き換えると、『ganttYellow』の指定でganttOrangeと同じ挙動となった。（それまではganttBlueと同じだった）
さらに、色の指定を、background-colorを「.bar」のものに、colorを「.bar .fn-label」のものに書き換えると、ganttBlueの挙動に戻った（デフォルトの色目はこれで決まる）
当然、background-colorを独自に“#FFFF00”など黄色に指定すれば、新規色追加が実現する。（続く‥）

【続き９】CSSファイルを移動する際の注意点

オリジナルのファイルをいじるのは怖いので（そもそもスクリプトはいじるつもりもないが‥）、
色追加したスタイルファイルなどはコピーしたものを変更することにする。
その指定変更は、ヘッダにあるスタイルファイル指定のLINKタグを修正して行なう。
一見、うまくいったように見えたが、よく見ると、スライダーやボタンがなくなってる。
これは、イメージファイルを見失ったからであり、分かったことは、ファイル構成としては、
あるフォルダから相対的に見て、

./css/style.css
./img/.DS_Store
./img/grid.png
./img/icon_sprite.png
./img/loader_bg.png
./img/slider_handle.png

となっている必要があるようだ。（続く‥）