05/28(Thu)

PHPで折れ線グラフをつくるまで[1]

PHPで折れ線グラフをつくるまで[1]

先日、折れ線グラフ作成奴を公開しました。
内部的にはPHPとjavascriptで動いているのですが、その仕組みについての備忘録も兼ねて書いていこうと思います。

機能概略

  1. パラメータを指定してAjaxで送信する
  2. PHPでパラメータを受け取り画像をつくる
  3. 受け取った画像を表示する

大雑把に段階を踏むとこんなかんじです。
とりあえず1から書いていきます。

パラメータを指定してAjaxで送信する


        
        

まずはHTMLの中身を組み上げていきます。
formタグの内部にinputタグやtextareaタグを配置していって
パーツごとにユニークなIDをつけます。

値、ラベル


        
        
        
      

文字列長が大きくなることが予想されるのでtextareaタグを使いました。
ラベルはなくてもいいけど値が空だとグラフにならないのでrequired属性を付加しています。
値が1つだけでもやっぱりグラフになりませんがその除外処理は後ほど。

画像サイズ、グラフ領域余白


        
        横(px)
        縦(px)
        
        
        上(px)
        右(px)
        下(px)
        左(px)
      

ほとんどのパーツがこのinput[type=number]です。
最大値、最小値、初期値を入れてやると意図しない数値が送信されるのを防ぐことができます。
とりあえずサイズは800x800までとしました

縦軸


        
        
        上限
        下限
        間隔
      

チェックボックスをlabelタグで囲ってやることでクリックで反応する範囲を指定できます。
この場合は「自動」の文字をクリックしても切り替えができます。
checked属性を付加して初期状態でチェックが入るようにしたので
残りの数値指定はdisabledにしておきます。


        
        背景
        グリッド
        グラフ
        文字
      

HTML5の新要素、input[type=color]をこれでもかと使用します。
挙動はブラウザ依存らしいので動作保証はできませんが
よっぽど古いやつを使ってるとかでもない限り大丈夫でしょう。
ちなみに実際はtableタグで整形しています。

文字


        
        サイズ
      

とくに注記することないですね

ボタン


        
        
        
      

エンターキーで送れるようにプレビューは[type=submit]にしてあります。
[type=reset]が設定されたボタンを押すとパラメータが初期値に戻ります。