筆者がEChartsを使って作ったデモです。
カードの裏がレーダーチャートです。
Apache EChartsのホームページはこちらです。
EChartsとは
Apache EChartsは、中国の企業Baiduによって開発された、データの視覚化ライブラリです。
このライブラリは、ウェブブラウザ上でのインタラクティブなグラフやチャートの生成をサポートするJavaScriptのツールです。
- 多様性: EChartsは折れ線グラフ、棒グラフ、散布図、地理図、ヒートマップなど、多数のチャートタイプをサポートしています。
- カスタマイズ: テーマ、アニメーション、インタラクティブ要素など、多くのカスタマイズオプションが提供されており、独自のスタイルに合わせてデザインを調整することができます。
- レスポンシブ: モバイルやデスクトップ、さまざまなデバイスやブラウザで最適に表示されるように設計されています。
- 高性能: 大量のデータセットでもスムーズな描画とインタラクションを実現するための最適化が施されています。
EChartsのインストール
Apache EChartsを利用して、データ視覚化の魅力を手軽に体験するためには、まずインストールを行う必要があります。
CDNを利用する場合
最も簡単なインストール方法は、CDNを利用することです。HTMLファイルの<head>部分に以下のコードを追加するだけです。
<script src="https://cdn.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js"></script>npmやyarnを利用する場合
Node.jsのプロジェクトでEChartsを使用したい場合は、npmやyarnを使ってパッケージをインストールすることができます。
npm install echarts --saveまたは
yarn add echarts基本的なチャートの作成
Apache EChartsは、様々なタイプのチャートを柔軟に生成することができます。ここでは、最もポピュラーな3つのチャートタイプ、折れ線グラフ、棒グラフ、円グラフの作成方法を紹介します。
HTMLの部分はdivタグだけです。
折れ線グラフ
<div id="pieChart" style="width: 600px; height: 400px;"></div>
<script>
var chart = echarts.init(document.getElementById('pieChart'));
var option = {
title: {
text: '年間売上分布'
},
tooltip: {},
series: [{
name: '売上',
type: 'pie',
radius: '50%',
data: [
{ value: 1048, name: '商品A' },
{ value: 735, name: '商品B' },
{ value: 580, name: '商品C' },
{ value: 484, name: '商品D' },
{ value: 300, name: '商品E' }
]
}]
};
chart.setOption(option);
</script>棒グラフ
<div id="lineChart" style="width: 600px; height: 400px;"></div>
<script>
var chart = echarts.init(document.getElementById('lineChart'));
var option = {
title: {
text: '月別売上'
},
tooltip: {},
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月']
},
yAxis: {
type: 'value'
},
series: [{
name: '売上',
type: 'line',
data: [820, 932, 901, 934, 1290]
}]
};
chart.setOption(option);
</script>円グラフ
<div id="barChart" style="width: 600px; height: 400px;"></div>
<script>
var chart = echarts.init(document.getElementById('barChart'));
var option = {
title: {
text: '商品別売上数'
},
tooltip: {},
xAxis: {
type: 'category',
data: ['商品A', '商品B', '商品C', '商品D', '商品E']
},
yAxis: {
type: 'value'
},
series: [{
name: '売上数',
type: 'bar',
data: [500, 700, 900, 800, 600]
}]
};
chart.setOption(option);
</script>応用的なチャートと機能
EChartsは基本的なチャートだけでなく、さまざまな応用的な機能も提供しています。
インタラクティブな機能
EChartsの一つの大きな強みは、インタラクティブな機能の豊富さです。
例えば、チャート上のデータポイントにホバーすると、詳細な情報がツールチップとして表示されたり、データの範囲をドラッグして拡大縮小することができます。これにより、ユーザーはデータをより詳しく、かつ直感的に理解することができます。
複数のデータセットの統合
複数のデータセットを一つのチャートに統合することで、データ間の関連性やトレンドを一目で確認することができます。
例えば、異なる年度の売上データを一つの折れ線グラフに重ねることで、年間の売上トレンドの変化を視覚的に比較することができます。
カスタムテーマの適用
EChartsはデフォルトのテーマだけでなく、カスタムテーマの適用もサポートしています。
チャートの色、フォント、スタイルなどを自分のウェブサイトやアプリのデザインに合わせてカスタマイズすることができます。EChartsの公式サイトでは、さまざまなカスタムテーマのサンプルも提供されているので、それを参考に自分のオリジナルテーマを作成することも可能です。
まず、EChartsのテーマビルダーを使用してテーマを作成します。
作成したテーマをJavaScriptとして保存し、それをあなたのプロジェクトにインポートします。
// カスタムテーマのインポート
import yourCustomTheme from './path_to_your_theme_file';
// テーマの登録
echarts.registerTheme('my_theme', yourCustomTheme);
// チャートの初期化時にテーマを適用
var myChart = echarts.init(document.getElementById('main'), 'my_theme');まとめ
EChartsは、初心者から上級者まで、多様なデータ視覚化ニーズに応えることができる強力なツールです。
コメント