105/28(Thu)PHPで折れ線グラフをつくるまで[1]TweetPHPで折れ線グラフをつくるまで[1]先日、折れ線グラフ作成奴を公開しました。内部的にはPHPとjavascriptで動いているのですが、その仕組みについての備忘録も兼ねて書いていこうと思います。機能概略パラメータを指定してAjaxで送信するPHPでパラメータを受け取り画像をつくる受け取った画像を表示する大雑把に段階を踏むとこんなかんじです。1から書いていきます。HTMLの中身を組み上げていきます。formタグの内部にinputタグやtextareaタグを配置していってパーツごとにユニークなIDをつけます。文字列長が大きくなることが予想されるのでtextareaタグを使いました。ラベルはなくてもいいけど値が空だとグラフにならないのでrequired属性を付加しています。値が1つだけでもやっぱりグラフになりませんがその除外処理は後ほど。入れてやると意図しない数値が送信されるのを防ぐことができます。チェックボックスをlabelタグで囲ってやることでクリックで反応する範囲を指定できます。この場合は「自動」の文字をクリックしても切り替えができます。checked属性を付加して初期状態でチェックが入るようにしたので残りの数値指定はdisabledにしておきます。HTML5の新要素、input[type=color]をこれでもかと使用します。挙動はブラウザ依存らしいので動作保証はできませんがよっぽど古いやつを使ってるとかでもない限り大丈夫でしょう。ちなみに実際はtableタグで整形しています。エンターキーで送れるようにプレビューは[type=submit]にしてあります。[type=reset]が設定されたボタンを押すとパラメータが初期値に戻ります。