ままろぐ

さて、このままでも十分グラフとして機能を果たします。

が、ここで困ったお願いをされました。


社長「この棒グラフ、グラデーションにならない？」
私「」





さあ、社長自らのお願いです。
当然できないとは簡単に言えません（社畜根性


しかしブラウザによってグラデーションの指示の仕方って違うんです。
なので、全バージョン書く必要があります。

そして今回は後付け指定なので、idを使うことにしました。

まず、グラデーションの指示ですが、以下のように書きます。

/*Firefox*/
background: -moz-linear-gradient(始まる場所, 色 色の場所, 色 色の場所, …);
/*Chrom Safari*/
background: -webkit-linear-gradient(始まる場所, 色 色の場所, 色 色の場所, …);
/*共通*/
background: linear-gradient(色の向き, 色 色の場所, 色 色の場所, …);

今回はこのように指定しました。

#barBG_ex{
/*Firefox*/
background: -moz-linear-gradient(top, #ccc 0%, #333 50%, #ccc 100%);
/*Chrom Safari*/
background: -webkit-linear-gradient(top, #ccc 0%,#333 50%,#ccc 100%);
/*共通*/
background: linear-gradient(to bottom, #ccc 0%,#333 50%,#ccc 100%);
}

これは半分の所から3段階にグラデーションする指定です。
左から上、真ん中、下の順に色指定しています。
これをそのままグラフに適用すると、棒グラフがメタリックなグラデーションになります。

【グラフ例4　棒グラフにグラデーション】

実際に仕事で作った色指定は全然違いますが、今回は省きます。
簡単に説明すると高さによってグラデーションが変わる物で、
高さ指定・グラデーション指定をclassとidで分けて指定することで、自由な変化を持たせています。


さあ、どんどん行きましょう。

グラフと言えば、やはり見やすさが大事。
となれば「目安ライン」みたいな物、欲しいですよね。

たとえばこのグラフなら「棒グラフは○m、折れ線グラフは●%」を
超えたか超えていないか一目で分かるラインをおいてあげると見やすさがアップします。

グラフの軸の前に以下のタグを記入し、スタイルシートでデザインを指示をします。
ラインの場所は棒グラフの高さ指定を利用しましょう。
HTML
<span class="levelLine M38" id="L01">赤ライン</span>
<span class="levelLine M42" id="L02">灰ライン</span>

cssですが、目安ラインを引くためにまずはグラフ全体の位置を絶対表示にしておきます。

CSS
div.graph {
margin: 0px;
border-width: 1px;
border-style: solid;
border-color: #666;
padding: 0px;
width: 520px;
height: 420px;
position: absolute;/*絶対表示に指定*/
overflow: hidden;
}
この上で以下のように記載してください。
でないとずれる可能性があるんです。

/* 目安ライン */
.levelLine {
text-indent: -8000px;
margin: 0px;
border-top-color: #fff;
padding: 0px;
position: absolute;
left: 50px;
bottom: 48px;
}
.levelLine#L01 { /*赤*/
width: 395px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #f00;
}
.levelLine#L02 { /*灰*/
width: 395px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #333;
}

【グラフ例5　グラフに目安ラインを引く】

いかがでしょう？
少しは参考になりましたでしょうか？

まあ、仕事を終えた後の覚え書きなので対して役には立たないかとｗ
実際、GoogleAPIとかHTML5がありますからね。


なお自分のサイトに利用しようとしてずれた、と言う方はおそらく配置ピクセルが問題なのでcssのピクセルを自分のサイトに合うようにいじってみてください。