将 CanvasJS 与 DataTable 集成-js教程-PHP中文网

将 CanvasJS 与 DataTable 集成

Barbara Streisand

发布： 2024-10-01 20:17:03

原创

787 人浏览过

CanvasJS 是一个 JavaScript 图表库，可让您创建交互式和响应式图表，而 DataTables 是一个 jQuery 插件，可通过分页、过滤和排序等高级交互控件增强 HTML 表格。将这两个工具组合在仪表板中可以实现实时数据可视化，通过根据表数据动态更新的交互式且具有视觉吸引力的图表，可以更轻松地分析和解释数据趋势和模式。

Integrating CanvasJS with DataTables

在本教程中，我们将逐步介绍将 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]
    }));
}

登录后复制