Chart.jsでデータを視覚化し、マーケティング活動をサポートしましょう
今回は、弊社が運営している課金通話プラットフォーム「Port」のマーケティング活動をサポートするツールの一つ、Chart.jsについて紹介させていただきます。
Chart.jsとは
「Port」のマーケティングチームは、ユーザーが「Port」をいつ、どのように使用しているかをより深く理解し、より使いやすいサービスを提供するために、幅広い取り組みを行っています。その重要な取り組みの一つがデータ分析です。市場のトレンド、顧客行動の分析、キャンペーンの成果など、複雑なデータを直感的に理解しやすい形で表示することで、より効果的な戦略を立てることが可能になりますので、データの可視化に注力しています。
Google Analyticsなどのデータ可視化を提供する解析ツールも有効に活用していますが、弊社がさらに一歩進んで、独自のニーズに合わせたカスタマイズチャートを自社の管理プラットフォームで作成しました。これにて、データセキュリティも強化しています。この背景には、Chart.jsの採用があります。 Chart.jsは、レスポンシブでインタラクティブなグラフとチャートを簡単に作成できる、ウェブベースのプロジェクトにおいて使いやすい軽量のデータ可視化ライブラリです。
Chart.jsを選んだ主な理由は以下の通りです：
- 導入の容易さと、特定のニーズに合わせて調整可能な高度なカスタマイズオプションを提供すること。
- 軽量性により、ウェブサイトのパフォーマンスを落とすことなく、高品質なチャートを迅速に表示できること。
- オープンソースであるため、コストを抑えながらも、豊富なコミュニティサポートを利用できること。
では、早速ですが、ユーザーの性別構成を視覚化することで、Chart.jsの便利さを実感してみましょう。
（本文の図に示されているデータは実際のものではなく、説明のために作成された例です。）
実践：円グラフでユーザー構成を分析
Chart.jsを自分のプロジェクトで使うためには、5つの基本ステップに従う必要がありますが、すぐに試してみたい場合は、公式のドキュメントウェブサイトにアクセスして、ステップ３と４の設定を自由にテストし、様々な機能を体験することができます。
ステップ１： Chart.jsをインストールしよう
Chart.jsを導入するには、以下の3つの方法があります：
- 公式のGitHubリポジトリからダウンロードします、
- 「npm install chart.js」または「yarn add chart.js」を実行します、
- CDNから実行時に読み込みます。
「Port」の管理プラットフォームでは、便利さとシンプルさからCDN方法を選択しました。それは、ウェブページの<head>セクションに下記のコードを追加するだけで完成します。
<head> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> </head>
ステップ２： キャンバスを表示しよう
次に、チャートを表示する場所を指示するためのHTMLタグ<canvas>を<body>セクションに記述します。
<body> <p>性別構成</p> <canvas id="genderChart"></canvas> </body>
ステップ３： データを準備しよう
データを渡す時が来ました。必要に応じて複数のデータセットを渡すことができますが、今回は円グラフを描くために1つのデータセットは充分になります。
凡例名は「labels」で定義することができます。「labels」配列、「data」配列、そして「backgroundColor」配列が同じ長さであり、それらの順序が一致していることを確認してください。
最後に、円グラフのため、「hoverOffset」は指定されたピクセル数だけホバーされたセクターを強調表示します。
以下のコードは全て<script>セクションで行われることに注意してください。
<script>
const genderData = {
labels: ['男性', '女性', '秘密'],
datasets: [{
label: '性別構成',
data: [12, 2, 2],
backgroundColor: [
'rgb(54, 162, 235)',
'rgb(255, 99, 132)',
'rgb(255, 205, 86)',
],
hoverOffset: 4,
}],
};
</script>
ステップ４： コンフィグを設定しよう
ちょっと待ってください。もうプログラムに円グラフを描きたいと伝えましたか？心配しないでください、今からそれを行います。
コンフィグは以下のように簡単にできます。前のステップで作成した「genderData」が「data」に渡されます。異なる変数名を使用している場合は、それを変更してください。
<script>
const genderConfig = {
type: 'pie',
data: genderData,
};
</script>
ステップ５： チャートを指定しよう
成果を確認するために、ステップ 4 で作成したコンフィグ（変数名：genderConfig）をステップ 1 で作成したキャンバス （id：genderChart）にリンクしましょう。
<script>
const genderChart = new Chart(document.getElementById('genderChart'), genderConfig);
</script>
結果
これで、以下のチャートに似たものが表示されるはずです。おめでとうございます！
ここでは青色・男性の割合が大きいようですね。はい、何を考えているかわかります。最初に示した例の画像には、種別データと合計が表示されていますね。これらにはもう少しコーディングが必要です。計算を少し行ってみたい気がするなら、一緒に挑戦してみましょう！
（本文の図に示されているデータは実際のものではなく、説明のために作成された例です。）
（中級）ステップ６：既存のプラグインを導入しよう
各カテゴリーのデータを表示するためには、「ChartDataLabels」というプラグインを使用して、ステップ4で「type」と「data」をコンフィグしたのと同様に「datalabels」をコンフィグすれば良いです。
プラグインをコンフィグするために、特定の階層構造に従う必要があります：options→plugins→datalabels→…。
デフォルトでは、カテゴリーの数を表示しますが、ここでは全員の比率を計算することで、さらに面白い情報を加えています。
「ChartDataLabels」は非常にカスタマイズ性が高く、詳細については公式ドキュメントを参照してください。
<script>
Chart.register(ChartDataLabels); // プラグインを追加
const genderConfig = {
type: 'pie',
data: genderData,
options: {
plugins: {
datalabels: {
color: 'black',
// 比率を表示
formatter: (value, ctx) => {
let sum = 0;
ctx.chart.data.datasets[0].data.forEach(data => {
sum += data;
});
let percentage = (value * 100 / sum).toFixed(2) + "%";
return value ? value + '名\n' + percentage : null;
}
}
}
},
};
</script>
（上級）ステップ７： 独自のプラグインをカスタマイズしよう
Chart.jsで既存のプラグインを使用するだけでなく、独自のプラグインを作成してユニークなニーズに対応することもできます。たとえば、円グラフの中央にユーザーの総数を表示したい場合、計算と表示は自分で行うことができます。
// 合計人数のプラグイン
const totalSumPlugin = {
id: 'totalSumPlugin',
afterDatasetsDraw: function(chart, easing) {
// 合計を計算
const ctx = chart.ctx;
let sum = 0;
chart.data.datasets.forEach((dataset) => {
sum += dataset.data.reduce((accumulator, value) => accumulator + value, 0);
});
// 仕様を指定
ctx.fillStyle = 'black';
ctx.font = '14px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
// 位置を指定
const centerX = (chart.chartArea.left + chart.chartArea.right) / 2;
const centerY = (chart.chartArea.top + chart.chartArea.bottom) / 2;
ctx.fillText('合計' + sum + '名', centerX, centerY);
}
};
プラグインの定義後、そのプラグインをコンフィグに登録する必要があります。これは既存のプラグインを使用するよりも簡単になります。独自のプラグインの名前を「plugins」配列に入れるだけで済みます。必要であれば、複数のプラグインをそこに配置することもできます。
<script>
const genderConfig = {
type: 'pie',
data: genderData,
plugins: [totalSumPlugin]
};
</script>
これで、以下のようなチャートが表示されるはずです。
（本文の図に示されているデータは実際のものではなく、説明のために作成された例です。）
最後に
わお！よく最後までやり遂げましたね！お時間とご興味をいただき、誠にありがとうございます。Chart.jsを使ってデータをより良く表示し、理解しましょう！
（本文の作成にはChatGPTを使用したことがあります。）