将 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中文网其他相关文章！