Raphaelで棒グラフを作成してみる

2015.09.12

RaphaelとgRaphaelを使って、棒グラフを作成してみます。

準備

RaphaelのサイトからRaphael本体をダウンロードします。

try-to-create-a-bar-chart-with-raphael01

次にgRaphaelのサイトからグラフ作成用のRaphaelのプラグインを2つダウンロードします。

try-to-create-a-bar-chart-with-raphael02

今回は棒グラフを作成するのでg.bar.jsをダウンロードしますが、作成するグラフの種類によって変更してください。
ダウンロードしたファイルをHTML内で読み込みます。

1
2
3
<script src="./raphael-min.js"></script>
<script src="./g.raphael-min.js"></script>
<script src="./g.bar-min.js"></script>

これで準備完了です。
　

サンプルコード

HTML

1
<div id="chart"></div>

CSS

1
2
3
4
5
#chart {
    width: 320px;
    height: 240px;
    margin: 0 auto;
}

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var dataArr = [110, 450, 870, 300, 630];
var colorArr = ['#E74C3C', '#3498DB', '#2ECC71', '#9B59B6', '#34495e'];
 
window.onload = function () {
    var r = Raphael('chart');
 
    // グラフタイトル
    r.text(160, 10, 'グラフタイトル');
 
    // グラフ作成
    r.barchart(10, 10, 300, 220, dataArr, {
        colors: colorArr
    });
};

棒グラフのデモページ
　

Paper.text(x, y, text) テキストを描画。
x,yがテキストの表示座標、textが描画するテキストを指定。
Paper.barchart(x, y, width, height, values, opts) 棒グラフを作成。
x,yがグラフの左上の座標、widthとheightがグラフのサイズ、valuesがグラフのデータ、optsがグラフのオプションを指定。

　

サンプルコード2

上記のサンプルをベースにいくつか調整を行ってみます。

JavaScript

データを2次元配列にしてみます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var dataArr = [
    [110, 450, 870, 300, 630],
    [150, 320, 480, 560, 600]
];
var colorArr = ['#E74C3C', '#3498DB'];
 
window.onload = function () {
    var r = Raphael('chart');
 
    // グラフタイトル
    r.text(160, 10, 'グラフタイトル');
 
    // グラフ作成
    r.barchart(10, 10, 300, 220, dataArr, {
        colors: colorArr
    });
};

2つのデータを比較する棒グラフになりました。
棒グラフのデモページ2
　

JavaScript

barchart()のオプションstackedを設定してみます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var dataArr = [
    [110, 450, 870, 300, 630],
    [150, 320, 480, 560, 600]
];
var colorArr = ['#E74C3C', '#3498DB'];
 
window.onload = function () {
    var r = Raphael('chart');
 
    // グラフタイトル
    r.text(160, 10, 'グラフタイトル');
 
    // グラフ作成
    r.barchart(10, 10, 300, 220, dataArr, {
        colors: colorArr,
        stacked: true
    });
};

2つのデータを合算した形の棒グラフになりました。
棒グラフのデモページ3
　

JavaScript

さらにオプションのtypeを設定してみます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var dataArr = [
    [110, 450, 870, 300, 630],
    [150, 320, 480, 560, 600]
];
var colorArr = ['#E74C3C', '#3498DB'];
 
window.onload = function () {
    var r = Raphael('chart');
 
    // グラフタイトル
    r.text(160, 10, 'グラフタイトル');
 
    // グラフ作成
    r.barchart(10, 10, 300, 220, dataArr, {
        colors: colorArr,
        stacked: true,
        type: 'round'
    });
};

棒グラフが角丸になりました。
棒グラフのデモページ4
　

サンプルコード3

横向きの棒グラフを作成してみます。

HTML

1
<div id="chart"></div>

CSS

1
2
3
4
5
#chart {
    width: 320px;
    height: 240px;
    margin: 0 auto;
}

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var dataArr = [110, 450, 870, 300, 630];
var colorArr = ['#E74C3C', '#3498DB', '#2ECC71', '#9B59B6', '#34495e'];
 
window.onload = function () {
    var r = Raphael('chart');
 
    // グラフタイトル
    r.text(160, 10, 'グラフタイトル');
 
    // グラフ作成
    r.hbarchart(10, 10, 300, 220, dataArr, {
        colors: colorArr
    });
};

横向きの棒グラフのデモページ
　

Paper.hbarchart(x, y, width, height, values, opts) 横向きの棒グラフを作成。
指定方法は基本的にはbarchart()と同じです。

　

【参考サイト】

　

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

Category

Tag

Recent

2025年3月
日 月 火 水 木 金 土
 1
2345678
9101112131415
16171819202122
23242526272829
3031