CanvasJS と DataTable の統合

CanvasJS は、インタラクティブで応答性の高いグラフを作成できる JavaScript グラフ作成ライブラリです。一方、DataTables は、ページネーション、フィルタリング、並べ替えなどの高度なインタラクション コントロールを使用して HTML テーブルを強化する jQuery プラグインです。これら 2 つのツールをダッシュ​​ボードで組み合わせると、リアルタイムのデータ視覚化が可能になり、テーブル データに基づいて動的に更新されるインタラクティブで視覚的に魅力的なグラフを通じて、データの傾向とパターンの分析と解釈が容易になります。

このチュートリアルでは、CanvasJS を DataTables と統合して、テーブル内のデータに基づいて更新される動的な円グラフを作成するプロセスを順を追って説明します。この例では、単純な HTML 構造と JavaScript コードを使用して統合を示します。

前提条件

始める前に、以下のものがあることを確認してください:

• HTML、CSS、JavaScript の基本的な知識
• プロジェクトに含まれる CanvasJS ライブラリと DataTables ライブラリ。

ステップ 1: HTML のセットアップ

まず、グラフのコンテナとデータのテーブルを含む HTML ファイルを作成します。

<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<table id="example" class="display" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
    </tr>
    <!-- Add more rows as needed -->
  </tbody>
</table>

ステップ 2: JavaScript ファイルの作成

script.js ファイルを作成し、次のコードを追加して DataTable と CanvasJS チャートを初期化します。

// Create DataTable
var table = new DataTable('#dataTable');

// Create chart
var chart = new CanvasJS.Chart('chartContainer', {
        animationEnabled: true,
    theme: "light2",
    title: {
        text: 'Staff Count Per Position'
    },
    data: [
        {
            type: "pie",
          dataPoints: chartData(table)
        }
    ]
});
chart.render();

// On each draw, update the data in the chart
table.on('draw', function () {
    chart.options.data[0].dataPoints = chartData(table);
    chart.render();
});

function chartData(table) {
    var counts = {};

    // Count the number of entries for each position
    table
        .column(1, { search: 'applied' })
        .data()
        .each(function (val) {
            if (counts[val]) {
                counts[val] += 1;
            }
            else {
                counts[val] = 1;
            }
        });

    return Object.entries(counts).map((e) => ({
        label: e[0],
        y: e[1]
    }));
}

• HTML 構造: HTML ファイルには、チャートのコンテナ (chartContainer) とサンプル データを含むテーブル (例) が含まれています。
• DataTable の初期化: DataTable は、DataTable コンストラクターを使用して初期化されます。
• CanvasJS チャートの初期化: チャート タイプ (円) やデータ ポイントなどの指定されたオプションを使用して、新しい CanvasJS チャートが作成されます。
• 動的データ更新: DataTable の描画イベントは、テーブルが再描画されるたびにチャートのデータ ポイントを更新するために使用されます。 chartData 関数は、各ポジションのエントリー数を計算し、それに応じてチャートを更新します。

ステップ 3: テストとデバッグ

• Web ブラウザで HTML ファイルを開きます。グラフと表が正しく表示されていることを確認します。
• エラーを確認する: ブラウザの開発者コンソールを開いて、JavaScript エラーがないか確認します。
• 動的更新の確認: テーブルに行を追加または削除し、それに応じてグラフが更新されることを確認します。

jsfiddle.net

これらの手順に従うことで、CanvasJS と DataTables を正常に統合し、テーブル内のデータに基づいて更新される動的な円グラフを作成できました。この統合により、データをリアルタイムで視覚化できるため、DataTable に表示される情報の分析と理解が容易になります。特定の使用例に合わせて、必要に応じてグラフと表を自由にカスタマイズしてください。コーディングを楽しんでください!

以上がCanvasJS と DataTable の統合の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。