弊社では、今年の忘年会でビンゴゲームを行いました
通常ルールの個人戦だけでは当たった人が飽きてしまうので、その対策としてチーム戦を導入することにしました。
ひとつ困ったことが。
集計したチーム戦の結果をどう発表するか！？
手書きの画用紙やパワーポイントも検討しましたが、見やすさと運営の手軽さを追求した結果、Webページでグラフを描画する方法を取りました。
結果発表でスクリーンに映したWebページには、ビジュアル分析ツール「loghouse」で活用しているC3.jsを使いました。
#作ったもの
※数字は適当です
bingo.html
<div id="chart"></div>
bingo.css
.c3 svg {
font-size: 26px;
}
.c3-text {
font-size: 55px;
}
.c3-axis-x {
font-size: 80px;
}
bingo-C3.js
var chart = c3.generate({
bindto: '#chart',
size: {
height: 600
},
padding: {
bottom: 100
},
data: {
x : 'x',
columns: [
['x', 'A', 'B', 'C', 'D', 'E', 'F'],
['data1', 200, 280, 300, 320, 260, 250]
],
type: 'bar',
labels: true,
colors: {
data1: function(d) {
var color = '#000000';
switch (d.index){
case 0:
color = 'rgb(255, 40, 0)';
break;
case 1:
color = 'rgb(0, 65, 255)';
break;
case 2:
color = 'rgb(250, 153, 0)';
break;
case 3:
color = 'rgb(53, 161, 107)';
break;
case 4:
color = 'rgb(255 ,153 ,160)';
break;
case 5:
color = 'rgb(102, 51, 0)';
break;
}
return color;
}
}
},
legend: {
show: false
},
axis: {
x: {
type: 'category'
}
}
});
C3.jsとは？
C3.jsは、チャートに特化したJavaScriptビジュアライゼーションライブラリで、ウェブブラウザで動的コンテンツを描画する可視化ライブラリD3.jsのラッパーライブラリです。
セットアップ
ダウンロード
C3 https://github.com/c3js/c3/releases/latest
D3 https://github.com/d3/d3/releases?after=v4.0.0
C3はD3がv4だと動かないので、D3はv3を選択しましょう。
ヘッダーに追加
bingo.html
<!-- Load c3.css -->
<link href="/path/to/c3.css" rel="stylesheet" type="text/css">
<!-- Load d3.js and c3.js -->
<script src="/path/to/d3.v3.min.js" charset="utf-8"></script>
<script src="/path/to/c3.min.js"></script>
基本形
bingo.html
<div id="chart"></div>
bingo-C3.js
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['data1', 200, 280, 300, 320, 260, 250]
],
type: 'bar'
}
});
6個の棒グラフが並んでいるグラフができました。
このグラフに対して次の効果を追加していきます。
- X軸の凡例を非表示にする
- チーム名を付ける
- チーム名ごとに棒グラフの色を変える
- チーム名の文字サイズを大きくする
- 得点の文字サイズを大きくする
- 棒グラフの上に得点を表示する
- 棒グラフの上に表示した得点の文字サイズを大きくする
効果を追加する
X軸の凡例を非表示にする
bingo-C3.js
legend: {
show: false
}
チーム名を付ける
bingo-C3.js
data: {
x : 'x',
columns: [
['x', 'A', 'B', 'C', 'D', 'E', 'F'],
],
},
axis: {
x: {
type: 'category'
}
}
チーム名ごとに棒グラフの色を変える
bingo-C3.js
data: {
colors: {
data1: function(d) {
var color = '#000000';
switch (d.index){
case 0:
color = 'rgb(255, 40, 0)';
break;
case 1:
color = 'rgb(0, 65, 255)';
break;
case 2:
color = 'rgb(250, 153, 0)';
break;
case 3:
color = 'rgb(53, 161, 107)';
break;
case 4:
color = 'rgb(255 ,153 ,160)';
break;
case 5:
color = 'rgb(102, 51, 0)';
break;
}
return color;
}
}
}
棒グラフの上に得点を表示する
bingo-C3.js
data: {
labels: true
}
得点の文字サイズを大きくする
bingo.css
.c3 svg{
font-size: 26px;
}
これですべての文字に対して文字サイズが大きくなりますが、さらに大きくしたい箇所があるので別途指定します。
棒グラフの上に表示した得点の文字サイズを大きくする
bingo.css
.c3-text {
font-size: 55px;
}
チーム名の文字サイズを大きくする
bingo.css
.c3-axis-x {
font-size: 80px;
}
チーム名が切れないようにSVGを調整
文字サイズが大きいため、X軸の値が切れてしまいました。
SVGのpaddingを指定します。
bingo-C3.js
padding: {
bottom: 100
}
これで完成です