Node.js を使用してグラフを作成する

1. billboard.jsの概要
2. billboard.js の前提条件
3. Node.js を使用してチャートを実装する例

このガイドでは、Node.js グラフ作成ライブラリを使用して印象的なグラフを作成する方法を説明します。

billboard.js の使いやすさと単純な設計により、データの視覚的表現を作成するための多数のライブラリがすでに存在します。

billboard.jsの概要

Billboard チャートは、billboard.js として知られるチャート ライブラリの命名に影響を与えました。 billboard.js は、D3 v4+ の上に構築された、高度で再利用可能で美しいインターフェイス チャート フレームワークです。

これは、開発者がすぐにグラフを生成してデータを表示できるようにする JavaScript パッケージです。

billboard.js の前提条件

billboard.js ライブラリを利用するには、次のものが必要です。

1. Node.js バージョン 10 以降および npm バージョン 5.2 以降がシステムにインストールされている必要があります。
2. HTML、JavaScript、およびライブラリの操作方法に関する基本的な理解が必要です。

CDN の 1つを使用すると、それを利用するために billboard.js ライブラリをインストールする必要はありません。 npm を使用して billboard.js ライブラリをインストールできます。

1. プロジェクト ファイルを保存する場所にターミナルを移動します。
2. 次のコマンドを実行すると、Node.js プロジェクトで使用されるサードパーティ ライブラリを管理するために Node.js が必要とする package.json および package.lock.json ファイルが生成されます。

$ npm init

$ npm install billboard.js

Node.js を使用してチャートを実装する例

次のコード スニペットは、Waqar's Gold と Sam's Silver の 2つのデータ値を含む棒グラフを生成します。

1. chart.html

   chart.html テンプレートで、ID barChart_1 の div を作成し、body タグ内に配置します。

   <!-- Load D3.js -->
   <script src="https://d3js.org/d3.v4.min.js"></script>
   
   <!-- Load billboard.js with style -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/billboard.js/1.4.1/billboard.min.js"></script>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/billboard.js/1.4.1/billboard.css">
   
   <div id="barChart_1"></div>
   

2. chart.js

   この例では、bb.generate() に提供された入力により、グラフが作成されます。

   var chart = bb.generate();
   

   data として知られる変数は、グラフの生成に必要なすべての情報を含むオブジェクトを格納します。

   data: {columns: [
            ['Waqar\'s Gold', 10, 20, 30, 40, 50, 60],
            ['Sam\'s Silver', 130, 100, 140, 200, 150, 50]
          ],
   

   タイプという用語は、使用されるチャートの特定の種類を示します。 この例では、棒グラフを作成していました。

   type: 'bar'
   }
   , bar: {width: {ratio: 0.1}}
   

   bindto: "#barChart_1" は、チャートが表示される場所に対応する HTML ファイルに div id を保存します。

   bindto: '#barChart_1';
   

完全なソース コード:

chart.html:

<div id="barChart_1"></div>

chart.js:

var chart = bb.generate({
  data: {
    columns: [
      ['Waqar\'s Gold', 10, 20, 30, 40, 50, 60],
      ['Sam\'s Silver', 130, 100, 140, 200, 150, 50],
    ],
    type: 'bar',
  },
  bar: {
    width: {
      ratio: 0.1,
    },
  },
  bindto: '#barChart_1',
});

出力：