將 CanvasJS 與 DataTable 集成

CanvasJS 是一個 JavaScript 圖表庫，可讓您建立互動式和響應式圖表，而 DataTables 是一個 jQuery 插件，可透過分頁、過濾和排序等高階互動控制來增強 HTML 表格。將這兩個工具組合在儀表板中可以實現即時資料視覺化，透過根據表格資料動態更新的互動式且具有視覺吸引力的圖表，可以更輕鬆地分析和解釋資料趨勢和模式。

在本教程中，我們將逐步介紹將 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 步：測試和調試

• 在網頁瀏覽器中開啟 HTML 檔案：確保圖表和表格正確顯示。
• 檢查錯誤：開啟瀏覽器的開發者控制台以檢查是否有任何 JavaScript 錯誤。
• 驗證動態更新：從表中新增或刪除行並確保圖表相應更新。

jsfiddle.net

透過執行下列步驟，您已成功將 CanvasJS 與 DataTables 集成，以建立根據表中的資料進行更新的動態餅圖。這種整合使您可以即時視覺化數據，從而更輕鬆地分析和理解數據表中呈現的資訊。您可以根據您的特定用例的需要隨意自訂圖表和表格。快樂編碼！

以上是將 CanvasJS 與 DataTable 集成的詳細內容。更多資訊請關注PHP中文網其他相關文章！