(ちょっとメモ)canvasでグラフを自動生成する「flotr2」が便利

canvasでグラフを生成してくれる javaScriptライブラリ Flotr2 を試してみました。

Flotr2は、折れ線グラフや円グラフなどの20種類以上のグラフを、データを記入するだけで自動的に作ってくれます。パーセントの計算もしなくていいし、グリッドを引くのもオマカセ。
頻繁に数値を更新するグラフがあるサイトには最適かも。
Humble software社が開発したライブラリ。MITライセンスです。

canvasでグラフを描画するのですが、カンバスのカの字も出てきません(笑)。
canvasをまったく知らなくて使えちゃう。
ただし、データはjavaScriptで入力するので、javaScriptの知識は少しはあったほうがいいかも。
(私のような「何となく雰囲気だけで」javaScriptを書いている初心者でも、そこそこ大丈夫でしたよ。www)
編集可能な表示オプションも豊富で、見た目をけっこうカスタマイズできます。

今回のサンプル

今回のサンプルはこちら。サンプルページは1ページ、サンプルは4つ用意しました。

サンプル1
「Basic Pie(円グラフ)」

適当な数値を入力すると、勝手に%で出力して、円グラフにしてくれます。
オプションで、扇型のすき間をあけたりツメたり、開始の角度を調整したり、グラフ全体の外枠を消したりしてみました。

サンプル2
「Basic Radar(レーダーチャート(多角形グラフ))」

これは項目数に合わせて多角形を作ります。
項目数が5個なら5角形、6個なら6角形といったかんじで。
これも数値を書くだけで自動計算してグラフにしてくれます。

サンプル3
「Basic(折れ線グラフ)」

折れ線グラフはデフォルトでは、x軸の最小値〜最大値まで、y軸の最小値〜最大値までで座標を作ってグラフにします。y軸は見にくいので、最小値・最大値を修正しました。
また、xy軸にタイトルもつけています。

サンプル4
「Stacked Bars(積層グラフ)」

これは折れ線グラフのデータをそのままコピペで使っています。
y軸の最小値はデータの最小値になるのがデフォなので、それを0に変更。
また、グラフにタイトルをつけ、バーの色も変えてみました。

本日のINDEX
  1. Flotr2の基本の使い方
    1. ・各グラフのサンプルを確認・編集してみる
    2. ・表示オプションのデフォルト値をみてみる
  2. Basic Pie(円グラフ)
  3. Basic Radar(レーダーチャート(多角形グラフ)
  4. Basic(折れ線グラフ)
  5. Stacked Bars(積層グラフ)
  6. 表示オプションのデフォルトソース

Flotr2の基本の使い方

基本的な使い方はこんなかんじです。

  1. 「Flotr2」をごそっと一式ダウンロード(右カラム下方の Download ZIP から)
  2. 「Flotr2-master」フォルダ内の第1階層にある「flotr2.min.js」を<head>に読み込む。
    flotr2.min.jsは一緒に入ってるflotr2.jsがミニファイされたものです)
    <script src="js/flotr2.min.js"></script>
  3. グラフを入れるdiv要素を用意してidをつけ、
    <div id="graph"></div>
    そのdivの縦横サイズをCSSで指定しておきます。
    (この「親」のdivからcanvasサイズを取得する(はず)。このサイズの範囲内でグラフを作ります)
    #graph {
    	width : 500px;
    	height: 300px;
    	margin: 1em auto;}
  4. javaScriptでそのidを指定(↓5行目)。
    関数(function)名はグラフの種類によって異なります(↓1行目)。
    (function basic_pie(container) {
    
    //(この部分にグラフにしたい数値・項目名・表示オプションを書く。詳細は後述)
    
    })(document.getElementById("graph"));

● 各グラフのサンプルを確認・編集してみる

グラフにしたいデータは 4 のjavaScript内に書きます。
グラフの種類によって書き方が違うので、Flotr2サイトでサンプルを確認します。
(または、ダウンロードしたフォルダ>examples>index.html も同じ内容です。)

ソース部分が編集可能なので、いじってプレビュー結果を確認できます。
「Run」をクリックすると、プレビューされるので、データの入力方法を確認したり、オプションを試してみたり。できあがったソースをコピペで使えて便利かも。

● 表示オプションのデフォルト値をみてみる

Flotr2サイトの documentation(資料)ページで、基本の使い方が(アッサリだけど)説明されています。このページの後半の「Configuration(設定)」に、デフォルトの設定オプションソースが記載されています。(または、ダウンロードしたフォルダ>flotr2.js>1598行目からにも、同じソースがあります)
(このオプションソースは、本記事末尾にも載せています)

また、各グラフ特有の表示オプションもあります。
これは、ダウンロードしたファイル群の中の「flotr2.js」(flotr2.min.jsと内容は同じ)に書かれているので、こちらも使えば色々カスタマイズできます。

それでは、今回作ってみたグラフを、表示オプションの使い方も含めて、以下にメモっておきます。

Basic Pie(円グラフ)

サンプル1
「Basic Pie(円グラフ)」

適当な数値を入力すると、勝手に%で出力して、円グラフにしてくれます。
オプションで、扇型のすき間をあけたりツメたり、開始の角度を調整したり、グラフ全体の外枠を消したりしてみました。

(function basic_pie(container) {
var
d1 = [[0, 11]],
d2 = [[0, 7]],
d3 = [[0, 3.8]],
d4 = [[0, 3.1]],
d5 = [[0, 15]],
d6 = [[0, 9]],   //項目数は自由
graph;
graph = Flotr.draw(container, [{ //canvasへの描画〜まず配列でデータとラベルを関連づけます
        data: d1,
        label: '項目名1'
    }, {
        data: d2,
        label: '項目名2',
        pie: {explode: 30} //2番目の扇型だけ、ちょっと飛び出させます
    }, {
        data: d3,
        label: '項目名3'
    }, {
        data: d4,
        label: '項目名4'
    }, {
        data: d5,
        label: '項目名5'
    }, {
        data: d6,
        label: '項目名6'
    }], {                  //ここから表示オプションです
        grid: {            //gridはグラフ内の罫線
            verticalLines: false,
            horizontalLines: false, //円グラフなので縦も横も罫線無しに
            outlineWidth: 0},       //それでも外枠は残るので幅を0に(デフォは1)
        xaxis: {showLabels: false},
        yaxis: {showLabels: false}, //円グラフなのでshowLabels(軸の目盛りテキスト表示)はfalseで
		mouse:{track:true}, //マウスオーバーでバリューボックスが出ます
        pie: {              //円グラフ特有のオプションを指定します
            show: true,    //デフォがfalseなのでtrueにして
            explode:0,     //飛び出し度を0にして扇型をくっつけます
            startAngle:Math.PI/2*1.1143},  //開始の角度を真上に(12時の位置)
        legend: {            //グラフのバーの色と項目名を関連づけるリストボックス
            position: 'sw',  //位置を左下に
            backgroundColor: '#ffc'}  //背景色も変更
    });
})(document.getElementById("graph1")); //divのidを入れないと無意味
</script>

● Basic Pie(円グラフ)のデータの書き方

最初に変数d1〜d6にデータを配列で代入。
この項目数は、ここでは6個にしてますが、いくつでも。
[0,●] といった具合で、最初は0、次にデータの数値を。この●は%で計算しなくても、ただ数値を書けばOK。勝手に%を計算して円グラフにしてくれます。

● Basic Pie(円グラフ)の表示オプション編集

  • mouse:{track:true}はマウスオーバーでバリューボックスが出るようにします。デフォルトはfalse。バリューボックスの位置もオプションで変更できます。(今回はデフォのままだけど)
  • pie(37行目)で円グラフ特有のオプションを指定します。
    explodeは、16行目でも使っている飛び出し度。コレを全体に指定することによって各扇型の間隔が空きます。デフォルトはexplode:6 で、各扇型が少しずつ離れていますが、ここでは0にしてピッタリくっつけました。
    startAngleはグラフが始まる角度。ラジアンで書きます。
    デフォルトは startAngle: Math.PI/4 ですが、これが微妙な位置...。12時ちょっと過ぎくらい?
    時計の12時のところから始めたいので書き直しました。(上の数値は超適当。いじってたらできただけ。笑)

● legendとは

legend(41行目)とは、グラフのバーの色と項目名を関連づけるリストボックスのこと。すべてのグラフに使えます。legend:{show:true}がデフォルトなので、falseにすれば非表示になります。
position:'sw'で左下に配置。swは南西の略。nsew(北南東西)で位置を指定するようです。デフォはnw(北西)で左上。
backgroundColorで背景色を指定できます。
この他、背景の透明度、ボーダーの色、マージンなどもオプション指定できます。legendの表示オプションのデフォルトは記事の最後に掲載しています)

Basic Radar(レーダーチャート(多角形グラフ)

サンプル2
「Basic Radar(レーダーチャート(多角形グラフ))」

これは項目数に合わせて多角形を作ります。
項目数が5個なら5角形、6個なら6角形といったかんじで。
これも数値を書くだけで自動計算してグラフにしてくれます。

(function basic_radar(container) {
var
s1 = {
label: 'データ名1',
data: [[0, 3],[1, 8],[2, 5],[3, 5],[4, 3],[5, 9]]},
s2 = {
label: 'データ名2',
data: [[0, 8],[1, 7],[2, 8],[3, 2],[4, 4],[5, 7]]},
s3 = {
label: 'データ名3',
data: [[0, 5],[1, 9],[2, 7],[3, 8],[4, 7],[5, 6]]},
graph, ticks;
ticks = [
        [0, "項目1"],
        [1, "項目2"],
        [2, "項目3"],
        [3, "項目4"],
        [4, "項目5"],
        [5, "項目6"]];

graph = Flotr.draw(container, [s1,s2,s3], { //canvasへの描画。変数を配列で指定して
        radar: {show: true},  //radar特有のオプション。デフォがfalseなのでtrueにして
        grid: {
            circular: true,   //罫線を多角形に。必須。
            minorHorizontalLines: true},  //細かい(マイナーな)水平の罫線を表示する
        yaxis: {    //yaxisはy軸。この場合は中心から各頂点への軸
            min: 0,
            max: 10,
            minorTickFreq: 2},  //小目盛りのテキストを表示する頻度
        xaxis: {ticks: ticks},  //xaxisはx軸。変数ticksを各頂点に表示
		legend: {
            position: 'se',
            backgroundColor: '#ffc'  //円グラフと同じように位置と背景色を変更
        }
    });
})(document.getElementById("graph2"));

● Basic Radar(レーダーチャート)のデータの書き方

s1、s2、s3はlabel(名前)とdataのセットです。ここでは3つにしたけど、何個でもOK。
data: [[▲,□], ....] の▲は多角形の頂点と中心点を結んだ軸。0からカウントします。0が真上(12時方向)です。
□がデータ。別に「10点満点中何点」などと計算しなくても数値を入れればOK。
データが6項目あるので、グラフは6角形になります。

13行目の変数ticksは、多角形の頂点に書きたいテキスト。6角形にしたいなら、0から5まで6個きちんと指定します。ここで数が合ってないと変になるよ。

● Basic Radar(レーダーチャート)の表示オプション編集

  • gridのcircular:trueは、罫線を多角形にしてくれる(24行目)。これをtrueにしないと、長方形のグリッドが出て意味無し。必須です。デフォは当然false。
  • 同じくgridの minorHorizontalLines:true} は細かい(マイナーな)水平の罫線を表示する(25行目)。レーダーチャートでは、このサンプルのように0〜10段階とか小さなスパンなので、細かい水平グリッドは必要。なのでtrue。
    デフォでは、小目盛り(minor ticks)の指定が無ければ省略して見やすくするようです。
  • yaxisはy軸のこと(26行目)。
    minmaxのデフォはnullで、データの最小値・最大値が自動的に使われるので、ここでは最小0、最大10と指定(27,28行)。
    minorTickFreqはマイナーな印をつける頻度(直訳やwww)。グラフの真ん中に入ってる小さい数字(0.0、2.0....、10.0)を入れる頻度を設定(29行目)。ここでは「2」にしたので0.0、2.0....、10.0と入ってるわけ。
  • xaxisはx軸のこと(30行目)
    {ticks: ticks}で、多角形の各頂点に、先ほど設定した変数ticks(13行目)のテキストが出ます。
  • legendは、円グラフでの説明をご参考に。

Basic(折れ線グラフ)

サンプル3
「Basic(折れ線グラフ)」

折れ線グラフはデフォルトでは、x軸の最小値〜最大値まで、y軸の最小値〜最大値までで座標を作ってグラフにします。y軸は見にくいので、最小値・最大値を修正しました。
また、xy軸にタイトルもつけています。

(function basic(container) {
var
d1 = [[1, 70],[2, 52],[3, 50.5],[4, 64],[5, 65],[6, 64]],
d2 = [[1, 42],[2, 40.7],[3, 55],[4, 58],[5, 66],[6, 68]],
d3 = [[1, 40],[2, 53],[3, 56],[4, 42],[5, 40.7],[6, 52]],
data = [{
   data: d1,
   label: "データ名1"}, {
   data: d2,
   label: "データ名2"}, {
   data: d3,
   label: "データ名3"
   }]
ticks = [
        [1, "2010年"],
        [2, "2011年"],
        [3, "2012年"],
        [4, "2013年"],
        [5, "2014年"],
        [6, "2015年"]];
graph = Flotr.draw(container, data, {
   grid: {outline:'ns'}, //外枠を上と下だけに
   xaxis: {ticks:ticks,  //変数ticksをx軸に表示
          title:'(年)'}, //x軸にタイトルを表示
   yaxis:{min:35,        //y軸の最小値を設定
          max:75,        //y軸の最大値を設定
		  title:'(kg)'}, //y軸にタイトルを表示
   legend: {
		  backgroundColor:"#eee",
		  margin:12},
});
})(document.getElementById("graph3"));

● Basic(折れ線グラフ)のデータの書き方

2〜20行で変数を指定しています。
それぞれのデータはlabel(名前)とdataのセットです。[▲,□]の▲はx軸、□はy軸の数値。
変数ticks(14〜20行目)は、後でx軸の目盛りに表示するテキストを指定しています。

● Basic(折れ線グラフ)の表示オプション編集

  • xaxis: {ticks: ticks}で、変数ticks(14〜20行目)をx軸のテキストにします。
    title:'テキスト'でx軸にタイトルを付けられます。
  • yaxis:{min:35,max:75} で、y軸の最小値と最大値を指定しています。これを指定しなければ入力したデータの数値の最小・最大値でグラフを描くので。少し上下に余裕を持たせました。
    title:'テキスト'でy軸にタイトルを付けられます。
  • legendは、円グラフでの説明をご参考に。

Stacked Bars(積層グラフ)

サンプル4
「Stacked Bars(積層グラフ)」

これは折れ線グラフのデータをそのままコピペで使っています。
y軸の最小値はデータの最小値になるのがデフォなので、それを0に変更。
また、グラフにタイトルをつけ、バーの色も変えてみました。

(function bars_stacked(container, horizontal) {
var
d1 = [[1, 70],[2, 52],[3, 50.5],[4, 64],[5, 65],[6, 64]],
d2 = [[1, 42],[2, 40.7],[3, 55],[4, 58],[5, 66],[6, 68]],
d3 = [[1, 40],[2, 53],[3, 56],[4, 42],[5, 40.7],[6, 52]],
data = [{
   data: d1,
   label: "データ名1"}, {
   data: d2,
   label: "データ名2"}, {
   data: d3,
   label: "データ名3"
   }]
ticks = [
        [1, "2010年"],
        [2, "2011年"],
        [3, "2012年"],
        [4, "2013年"],
        [5, "2014年"],
        [6, "2015年"]];
graph = Flotr.draw(container, data, {
   title: 'タイトルもつけられます',  //グラフにタイトルをつける
   subtitle:'(単位:kg)',          //グラフにサブタイトルをつける
   colors:['#2d91e5','#e4548e','#e7cf00','#0cae7b','#a435c0'],//バーの色変更
   legend: {
      position: "se",
      backgroundColor: "#fff",
	  margin: 10,                    //legendのマージンを変更
	  backgroundOpacity: 0.6},       //legendの背景の透明度を変更(デフォは0.85)
   bars: {           //バーの表示オプション
      show: true,    //falseがデフォルト=折れ線グラフになります
      stacked: true, //バーを積み上げる。falseでレイヤーのように同じ位置に重ねます
      barWidth:0.7,  //バーの幅。1がデフォ
      lineWidth:0,   //バーの枠線を消す(デフォは2)
	  fillOpacity: 0.7,  //バーの透明度を変更
      shadowSize:0},     //バーのシャドウを消す
   grid: {verticalLines:false},  //グリッドの縦の罫を非表示に
   xaxis: {ticks: ticks},  //変数ticksをx軸に表示
   yaxis: {min:0}   //y軸の最小値を0にした
});
})(document.getElementById("graph4"));

● Stacked Bars(積層グラフ)のデータの書き方

2〜20行で変数を指定。これは上の「折れ線グラフ」とまったく同じです。

● Stacked Bars(積層グラフ)の表示オプション編集

  • title:'テキスト'subtitle:'テキスト' で、グラフのタイトル、サブタイトルがつけられます。
  • colorsは、バーの色。次項で説明↓
  • legendは、円グラフでの説明をご参考に。
  • 29行目の bars は、グラフのバーの指定です。積層グラフでは、このbarsの指定が重要。
    show: trueで棒グラフになります。デフォルトはfalseで折れ線グラフになります。
    stacked: trueは、バーを積み上げて積層グラフにします(横位置の積層グラフもあり、その場合は左から右につなぎます)。デフォはfalseでレイヤーのように同じ位置に重なります。
    barWidth:0.7は、バーの幅。デフォの「1」ではバー同士がくっつきます。
    lineWidth:0は、バーの枠線。デフォは「2」。0で枠無しになります。
    fillOpacity: 0.7は、バーの透明度。デフォは「0.4」。だいぶ濃くしました。
    shadowSize:0は、シャドウのサイズ。デフォルトは「4」。0で影が無くなってフラットに。
  • grid: {verticalLines:false} で、グリッドの縦のラインを消します。
    デフォはtrue。折れ線グラフの時は必要ですね。
  • 最後の yaxis: {min:0} で、y軸の最小値を「0」にしています。
    このmin値を指定しなければ、デフォルトでデータの最小値=このサンプルの場合は「40」が適用されます。y軸が40から始まると、「データ名1(青のバー)」だけ40から上に伸びるので、他のデータ名2,3と比べて極端に少なく見えてしまいます。
    積層グラフの場合はこの yaxis: {min:0}(横位置の積層グラフならxaxis: {min:0}は必須かな。

● バーの色の変更

ちなみに、ご存知の方も多いと思いますが、Photoshopの「表示→校正設定」で、赤緑色覚異常の
「P型(1型)色覚」
「D型(2型)色覚」
での見え方が確認できます。(CS4から)
これで確認しながら色を決定していくとイイですね。

表示オプションのデフォルトソース

今回のサンプルのように「表示オプション」を使ってグラフの見た目をカスタマイズできます。
「表示オプション」のデフォルト値は、flotr2からダウンロードしたファイル内の「flotr2.js」で確認できます。(これは、flotr2の「docs」> Configuration > Flotr2 Defaults でも見られます)
グローバルオプションと、x軸、y軸、grid、mouseのデフォルトがまとめてあり、解説もついてます。
(以下にも貼っておきます↓)

/**
 * Flotr Defaults
 */
Flotr.defaultOptions = {
  colors: ['#00A8F0', '#C0D800', '#CB4B4B', '#4DA74D', '#9440ED'],
  //=> The default colorscheme. When there are > 5 series, additional colors are generated.
  ieBackgroundColor: '#FFFFFF', // Background color for excanvas clipping
  title: null,             // => The graph's title
  subtitle: null,          // => The graph's subtitle
  shadowSize: 4,           // => size of the 'fake' shadow
  defaultType: null,       // => default series type
  HtmlText: true,          // => wether to draw the text using HTML or on the canvas
  fontColor: '#545454',    // => default font color
  fontSize: 7.5,           // => canvas' text font size
  resolution: 1,           // => resolution of the graph, to have printer-friendly graphs !
  parseFloat: true,        // => whether to preprocess data for floats (ie. if input is string)
  preventDefault: true,    // => preventDefault by default for mobile events.  Turn off to enable scroll.
  xaxis: {
    ticks: null,           // => format: either [1, 3] or [[1, 'a'], 3]
    minorTicks: null,      // => format: either [1, 3] or [[1, 'a'], 3]
    showLabels: true,      // => setting to true will show the axis ticks labels, hide otherwise
    showMinorLabels: false,// => true to show the axis minor ticks labels, false to hide
    labelsAngle: 0,        // => labels' angle, in degrees
    title: null,           // => axis title
    titleAngle: 0,         // => axis title's angle, in degrees
    noTicks: 5,            // => number of ticks for automagically generated ticks
    minorTickFreq: null,   // => number of minor ticks between major ticks for autogenerated ticks
    tickFormatter: Flotr.defaultTickFormatter, // => fn: number, Object -> string
    tickDecimals: null,    // => no. of decimals, null means auto
    min: null,             // => min. value to show, null means set automatically
    max: null,             // => max. value to show, null means set automatically
    autoscale: false,      // => Turns autoscaling on with true
    autoscaleMargin: 0,    // => margin in % to add if auto-setting min/max
    color: null,           // => color of the ticks
    mode: 'normal',        // => can be 'time' or 'normal'
    timeFormat: null,
    timeMode:'UTC',        // => For UTC time ('local' for local time).
    timeUnit:'millisecond',// => Unit for time (millisecond, second, minute, hour, day, month, year)
    scaling: 'linear',     // => Scaling, can be 'linear' or 'logarithmic'
    base: Math.E,
    titleAlign: 'center',
    margin: true           // => Turn off margins with false
  },
  x2axis: {},
  yaxis: {
    ticks: null,           // => format: either [1, 3] or [[1, 'a'], 3]
    minorTicks: null,      // => format: either [1, 3] or [[1, 'a'], 3]
    showLabels: true,      // => setting to true will show the axis ticks labels, hide otherwise
    showMinorLabels: false,// => true to show the axis minor ticks labels, false to hide
    labelsAngle: 0,        // => labels' angle, in degrees
    title: null,           // => axis title
    titleAngle: 90,        // => axis title's angle, in degrees
    noTicks: 5,            // => number of ticks for automagically generated ticks
    minorTickFreq: null,   // => number of minor ticks between major ticks for autogenerated ticks
    tickFormatter: Flotr.defaultTickFormatter, // => fn: number, Object -> string
    tickDecimals: null,    // => no. of decimals, null means auto
    min: null,             // => min. value to show, null means set automatically
    max: null,             // => max. value to show, null means set automatically
    autoscale: false,      // => Turns autoscaling on with true
    autoscaleMargin: 0,    // => margin in % to add if auto-setting min/max
    color: null,           // => The color of the ticks
    scaling: 'linear',     // => Scaling, can be 'linear' or 'logarithmic'
    base: Math.E,
    titleAlign: 'center',
    margin: true           // => Turn off margins with false
  },
  y2axis: {
    titleAngle: 270
  },
  grid: {
    color: '#545454',      // => primary color used for outline and labels
    backgroundColor: null, // => null for transparent, else color
    backgroundImage: null, // => background image. String or object with src, left and top
    watermarkAlpha: 0.4,   // => 
    tickColor: '#DDDDDD',  // => color used for the ticks
    labelMargin: 3,        // => margin in pixels
    verticalLines: true,   // => whether to show gridlines in vertical direction
    minorVerticalLines: null, // => whether to show gridlines for minor ticks in vertical dir.
    horizontalLines: true, // => whether to show gridlines in horizontal direction
    minorHorizontalLines: null, // => whether to show gridlines for minor ticks in horizontal dir.
    outlineWidth: 1,       // => width of the grid outline/border in pixels
    outline : 'nsew',      // => walls of the outline to display
    circular: false        // => if set to true, the grid will be circular, must be used when radars are drawn
  },
  mouse: {
    track: false,          // => true to track the mouse, no tracking otherwise
    trackAll: false,
    position: 'se',        // => position of the value box (default south-east).  False disables.
    relative: false,       // => next to the mouse cursor
    trackFormatter: Flotr.defaultTrackFormatter, // => formats the values in the value box
    margin: 5,             // => margin in pixels of the valuebox
    lineColor: '#FF3F19',  // => line color of points that are drawn when mouse comes near a value of a series
    trackDecimals: 1,      // => decimals for the track values
    sensibility: 2,        // => the lower this number, the more precise you have to aim to show a value
    trackY: true,          // => whether or not to track the mouse in the y axis
    radius: 3,             // => radius of the track point
    fillColor: null,       // => color to fill our select bar with only applies to bar and similar graphs (only bars for now)
    fillOpacity: 0.4       // => opacity of the fill color, set to 1 for a solid fill, 0 hides the fill 
  }
};

グラフのタイプ別の表示オプションや、legendなどのデフォルトは、flotr2からダウンロードしたファイル内の「flotr2.js」内にあります。
この「flotr2.js」は、7200行ほどのファイル。メッチャ長い!
気になるキーワード(グラフの名前とか)で検索して、必要な部分だけ確認しよう。

*ちなみに何が何行目から載っているか、調べた分だけメモ。せっかくだから(笑)
lines(グラフのライン(折れ線グラフ系)の表示オプションのデフォ)→ 3482行から
bars(グラフのバー(棒グラフ系)の表示オプションのデフォ)→ 3775行から
pie(円グラフの表示オプションのデフォ)→ 4772行から
radar(レーダーチャートの表示オプションのデフォ)→ 5040行から
timeline(タイムラインの表示オプションのデフォ)→ 5186行から

各グラフに共通で使うlegendの表示オプション6546行から)だけ、こちらに記載しておきます↓

Flotr.addPlugin('legend', {
  options: {
    show: true,            // => setting to true will show the legend, hide otherwise
    noColumns: 1,          // => number of colums in legend table // @todo: doesn't work for HtmlText = false
    labelFormatter: function(v){return v;}, // => fn: string -> string
    labelBoxBorderColor:'#CCCCCC', // => border color for the little label boxes
    labelBoxWidth: 14,
    labelBoxHeight: 10,
    labelBoxMargin: 5,
    container: null,       // => container (as jQuery object) to put legend in, null means default on top of graph
    position: 'nw',        // => position of default legend container within plot
    margin: 5,             // => distance from grid edge to default legend container within plot
    backgroundColor: '#F0F0F0', // => Legend background color.
    backgroundOpacity: 0.85// => set to 0 to avoid background, set to 1 for a solid background
  },

flotr2.jsの冒頭のライセンス記述部分です。

/*!
  * bean.js - copyright Jacob Thornton 2011
  * https://github.com/fat/bean
  * MIT License
  * special thanks to:
  * dean edwards: http://dean.edwards.name/
  * dperini: https://github.com/dperini/nwevents
  * the entire mootools team: github.com/mootools/mootools-core
  */

次回予告

flotr2、使えますね。ただ難点は、javaScript苦手だと設定が大変。1度設定しちゃえば後の更新がラクだけど。
とにかくIllustratorでグラフを作り、画像化し、アップロードするといった過程を、マークアップだけでできるのはイイですね。

さて、次回こそcanvasでアニメーションを作った結果をアップします!

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2017/06 | 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.