Flotについて メモ
jQueryを使用したグラフ作成のアレ
データフォーマット
{
color: color or number
data: rawdata
label: string
lines: specific lines options
bars: specific bars options
points: specific points options
xaxis: number
yaxis: number
clickable: boolean
hoverable: boolean
shadowSize: number
highlightColor: color or number
}
color：色指定 または 色番号（１～５？ 初期値： ["#edc240", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"]）
data：データ
label：ラベルテキスト（色：ラベルテキストが指定した場所に表示される）
他はおいおい
legendのカスタマイズオプション
legend: {
show: boolean
labelFormatter: null or (fn: string, series object -> string)
labelBoxBorderColor: color
noColumns: number
position: "ne" or "nw" or "se" or "sw"
margin: number of pixels or [x margin, y margin]
backgroundColor: null or color
backgroundOpacity: number between 0 and 1
container: null or jQuery object/DOM element/jQuery expression
sorted: null/false, true, "ascending", "descending", "reverse", or a comparator
}
show : 表示するかをbooleanで(true or false)
labelFormatter : 知らん！
labelBocBorderColor : 色指定（legeの囲いの色）
noColumns : 知らん！
position : グラフのどこに表示するか。（東西南北を英語で示している）
margin : マージン
backgroundColor : legendの背景色
backgroundOpacity : legendの背景の透明度？
container : 知らん！
sorted : 知らん！
各軸（axis）のオプション
xaxis, yaxis: {
show: null or true/false
position: "bottom" or "top" or "left" or "right"
mode: null or "time" ("time" requires jquery.flot.time.js plugin)
timezone: null, "browser" or timezone (only makes sense for mode: "time")
color: null or color spec
tickColor: null or color spec
font: null or font spec object
min: null or number
max: null or number
autoscaleMargin: null or number
transform: null or fn: number -> number
inverseTransform: null or fn: number -> number
ticks: null or number or ticks array or (fn: axis -> ticks array)
tickSize: number or array
minTickSize: number or array
tickFormatter: (fn: number, object -> string) or string
tickDecimals: null or number
labelWidth: null or number
labelHeight: null or number
reserveSpace: null or true
tickLength: null or number
alignTicksWithAxis: null or number
}
説明は面倒なのでここの原文読んで
ただ使えるのが
tickSizeでグリッドの幅を指定して、
tickFormatter : function(v, axis){ //v=値 axis=位置
//ここでこんな時ははtickを表示してあんな時は表示しない処理
}
ってやるといろいろ出来そう
参考では拡張されたFlotみたいなの使ってるから必要そうなとこだけをみるといいよ！
そして、結構APIのjsファイルを読み込むのを忘れるので注意
以前jQplotを使用したことがあるのですが・・・
まぁ、リアルタイム表示とズームが出来るのがスムーズってくらいかな。
表現はjQplotの方がいろいろ出来ると思います。
javascriptをガリガリかける人ならjQplotの方がいいかも。
あと、表示するグラフの単位が一つだけならccchartってのがいい！
英語ダメって人はccchartが断然いい！
開発者がたぶん日本人だからｗ
あと、機能が結構いろいろ詰まってて今後きたい
