（ちょっとメモ）Canvasでグラフを自動生成する「flotr2」が便利
最終更新日：2019年02月06日 （初回投稿日：2015年05月25日）
Canvasでグラフを生成してくれる javaScriptライブラリ Flotr2 を試してみました。
Flotr2は、折れ線グラフや円グラフなどの20種類以上のグラフを、データを記入するだけで自動的に作ってくれます。パーセントの計算もしなくていいし、グリッドを引くのもオマカセ。頻繁に数値を更新するグラフがあるサイトには最適かも。
Humble software社が開発したライブラリ。MITライセンスです。
Canvasでグラフを描画するのですが、キャンバスのキャの字も出てきません。Canvasをまったく知らなくて使えちゃうw。
ただし、データは javaScriptで入力するので、javaScriptの知識は少しはあったほうがいいかも。
（私のような「何となく雰囲気だけで」javaScriptを書いている者でも、そこそこ大丈夫でしたよw）
編集可能な表示オプションも豊富で、見た目をけっこうカスタマイズできます。
今回のサンプル
今回のサンプルはこちら。サンプルページは1ページ、サンプルは4つ用意しました。
サンプル2「Basic Radar（レーダーチャート（多角形グラフ））」
Flotr2の基本の使い方
基本的な使い方はこんなかんじです。
- 「Flotr2」をごそっと一式ダウンロード（右カラム下方の Download ZIP から）
- 「Flotr2-master」フォルダ内の第1階層にある「flotr2.min.js」を HTML上に読み込む。
（flotr2.min.jsは一緒に入ってるflotr2.jsがミニファイされたものです）
下記は「js」フォルダに入れてみた例。<script src="js/flotr2.min.js"></script> - グラフを入れるdiv要素を用意してidをつける。
下記はdivに「graph」というidをつけた例。<div id="graph"></div> - そのdivの縦横サイズをCSSで指定しておきます。（このサイズの範囲内でグラフを作ります）
下記は div#graphのサイズを500x300pxにした例。ついでにマージンも。#graph { width : 500px; height: 300px; margin: 1em auto;} - javaScriptでそのidを指定（↓5行目）。
関数（function）名はグラフの種類によって異なります（↓1行目）。
下記は 円グラフ（basic_pie）での例。(function basic_pie(container) { //（この部分にグラフにしたい数値・項目名・表示オプションを書く。詳細は後述） })(document.getElementById("graph"));
各グラフのサンプルを確認・編集してみる
グラフにしたいデータは上記の 5 の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行目）。
minとmaxのデフォは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}）は必須かな。
バーの色の変更
- バーの色の変更は colors の配列で指定します（24行目）。
デフォルトは、colors: ['#00A8F0', '#C0D800', '#CB4B4B', '#4DA74D', '#9440ED'] です。
それを、下図のように別の色に変更してみました。
デフォルトカラーは、赤系と緑系（3番目と4番目）が並んでいたので離してみました。
色指定でのアクセシビリティについてはこちらをご覧ください
[14-4] 色指定について：色指定でのアクセシビリティ（色覚のマイノリティに分かりやすく）
ちなみに、ご存知の方も多いと思いますが、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、使えますね。ただ難点は、javaScript苦手だと設定が大変。1度設定しちゃえば後の更新がラクだけど。
とにかくIllustratorでグラフを作り、画像化し、アップロードするといった過程を、マークアップだけでできるのはイイですね。
さて、次回こそCanvasでアニメーションを作った結果をアップします！
- 関連記事
-
- [70-4] JavaScriptライブラリで作るSVGモーフィングアニメーション
- [70-3] CSSだけで作る SVGのドローイングアニメーション
- [70-2] SVGフィルターを使ってみた
- [70-1] svg要素でベクターグラフィクスを埋め込もう
- （ちょっとメモ）API って何だ？（HTML5 の API について）
- （ちょっとメモ）CanvasサイズをCSS3のvw, vhで取得してみたけど...
- [69-14] Canvasのアニメーションの基本を見てみよう
- （ちょっとメモ）Canvasでグラフを自動生成する「flotr2」が便利
- [69-13] Canvasで画像データをURLとして取得しよう
- （ちょっとメモ）Canvasで画像をランダムに描くサイト背景をWordPressで使ってみた
- [69-12] Canvasをサイトの背景に使おう
- [69-11] Canvasでビットマップを操作しよう（ビットマップの明度や色調の変更）
- [69-10] Canvasの描画の状態を保存・復元する save() と restore()
- [69-9] Canvasでグラフィックスの変形をしよう（拡大・回転・移動・反転など）
- （ちょっとメモ）Canvasで便利な javaScriptライブラリ
やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します！ (笑)
初心者にも使いやすい（と思う）レンタルサーバー
「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、
スターサーバー
や ロリポップ！
です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。
ちょっと料金は高いけど、さくらのレンタルサーバ
や、エックスサーバー
は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。
スポンサーリンク
