時々社内ニートのメモ 目指せ非プログラマー

案件がない時は社内ニートなだけだよ (もう何でもごじゃれ c, c++, c#, VB, java, php, javascript, sql, html, css 他)

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:色指定 または 色番号(1~5? 初期値: ["#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が断然いい!

開発者がたぶん日本人だからw

あと、機能が結構いろいろ詰まってて今後きたい