Highcharts 集成

最近，我们收到了一些反馈，询问如何以图形格式显示来自 DataTable 的信息。使用我们的 API 和图表库，这是完全可以做到的。有很多可用的库，但在本博文中，我们将使用非常流行的 Highcharts，展示如何将其集成到您的 DataTables 项目中。

这是一个我们将创建的集成类型的示例。请注意，当我们过滤表格时，图表会重新绘制以反映过滤后的数据。

姓名	职位	办公室	薪水
Tiger Nixon	系统架构师	爱丁堡	$320,800
Garrett Winters	会计	东京	$170,750
Ashton Cox	初级技术作者	旧金山	$86,000
Cedric Kelly	高级 JavaScript 开发者	爱丁堡	$433,060
Airi Satou	会计	东京	$162,700
Brielle Williamson	集成专家	纽约	$372,000
Herrod Chandler	销售助理	旧金山	$137,500
Rhona Davidson	集成专家	东京	$327,900
Colleen Hurst	JavaScript 开发者	旧金山	$205,500
Sonya Frost	软件工程师	爱丁堡	$103,600
Jena Gaines	办公室经理	伦敦	$90,560
Quinn Flynn	支持主管	爱丁堡	$342,000
Charde Marshall	区域主管	旧金山	$470,600
Haley Kennedy	高级营销设计师	伦敦	$313,500
Tatyana Fitzpatrick	区域主管	伦敦	$385,750
Michael Silva	营销设计师	伦敦	$198,500
Paul Byrd	首席财务官 (CFO)	纽约	$725,000
Gloria Little	系统管理员	纽约	$237,500
Bradley Greer	软件工程师	伦敦	$132,000
Dai Rios	人事主管	爱丁堡	$217,500
Jenette Caldwell	开发主管	纽约	$345,000
Yuri Berry	首席营销官 (CMO)	纽约	$675,000
Caesar Vance	售前支持	纽约	$106,450
Doris Wilder	销售助理	悉尼	$85,600
Angelica Ramos	首席执行官 (CEO)	伦敦	$1,200,000
Gavin Joyce	开发者	爱丁堡	$92,575
Jennifer Chang	区域主管	新加坡	$357,650
Brenden Wagner	软件工程师	旧金山	$206,850
Fiona Green	首席运营官 (COO)	旧金山	$850,000
Shou Itou	区域营销	东京	$163,000
Michelle House	集成专家	悉尼	$95,400
Suki Burks	开发者	伦敦	$114,500
Prescott Bartlett	技术作者	伦敦	$145,000
Gavin Cortez	团队主管	旧金山	$235,500
Martena Mccray	售后支持	爱丁堡	$324,050
Unity Butler	营销设计师	旧金山	$85,675
Howard Hatfield	办公室经理	旧金山	$164,500
Hope Fuentes	秘书	旧金山	$109,850
Vivian Harrell	财务总监	旧金山	$452,500
Timothy Mooney	办公室经理	伦敦	$136,200
Jackson Bradshaw	总监	纽约	$645,750
Olivia Liang	支持工程师	新加坡	$234,500
Bruno Nash	软件工程师	伦敦	$163,500
Sakura Yamamoto	支持工程师	东京	$139,575
Thor Walton	开发者	纽约	$98,540
Finn Camacho	支持工程师	旧金山	$87,500
Serge Baldwin	数据协调员	新加坡	$138,575
Zenaida Frank	软件工程师	纽约	$125,250
Zorita Serrano	软件工程师	旧金山	$115,000
Jennifer Acosta	初级 JavaScript 开发者	爱丁堡	$75,650
Cara Stevens	销售助理	纽约	$145,600
Hermione Butler	区域主管	伦敦	$356,250
Lael Greer	系统管理员	伦敦	$103,500
Jonas Alexander	开发者	旧金山	$86,500
Shad Decker	区域主管	爱丁堡	$183,000
Michael Bruce	JavaScript 开发者	新加坡	$183,000
Donna Snider	客户支持	纽约	$112,000

在这篇文章中，我将逐步介绍将 DataTables 与 Highcharts 链接起来的过程。我将涵盖

静态图表
异步图表
带数据处理的图表

静态图表

Highcharts 提供了多种不同的图表类型。在本博文中，我将使用饼图和柱状图。

下面显示了一个非常基本的饼图初始化

var myChart = Highcharts.chart('container', {
    chart: {
        type: 'pie',
    },
    title: {
        text: 'Staff Count Per Office',
    },
    series: [
        {
            data: countMap,
        },
    ],
});

配置相当直白。我们将 chart.type 设置为 pie，用于饼图，并将 title.text 设置为 每个办公室的员工数量。 series 数组被设置为包含一个对象，该对象包含该系列所需的数据。

现在，剩下的就是从 DataTable 收集数据。为此，我们只需使用 column().data() 方法迭代所需列的值，在迭代过程中递增值。然后，将生成的箱体数据转换为 Highcharts 可以使用的对象数组。

var table = $('#example').DataTable();
var counts = {};

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

// And map it to the format highcharts uses
var countMap = $.map(counts, function (val, key) {
    return {
        name: key,
        y: val,
    };
});

该代码生成的表格和图表的示例如下所示。另外，还提供了一个可用的在线版本，您可以对其进行修改和实验。

姓名	职位	办公室	薪水
Tiger Nixon	系统架构师	爱丁堡	$320,800
Garrett Winters	会计	东京	$170,750
Ashton Cox	初级技术作者	旧金山	$86,000
Cedric Kelly	高级 JavaScript 开发者	爱丁堡	$433,060
Airi Satou	会计	东京	$162,700
Brielle Williamson	集成专家	纽约	$372,000
Herrod Chandler	销售助理	旧金山	$137,500
Rhona Davidson	集成专家	东京	$327,900
Colleen Hurst	JavaScript 开发者	旧金山	$205,500
Sonya Frost	软件工程师	爱丁堡	$103,600
Jena Gaines	办公室经理	伦敦	$90,560
Quinn Flynn	支持主管	爱丁堡	$342,000
Charde Marshall	区域主管	旧金山	$470,600
Haley Kennedy	高级营销设计师	伦敦	$313,500
Tatyana Fitzpatrick	区域主管	伦敦	$385,750
Michael Silva	营销设计师	伦敦	$198,500
Paul Byrd	首席财务官 (CFO)	纽约	$725,000
Gloria Little	系统管理员	纽约	$237,500
Bradley Greer	软件工程师	伦敦	$132,000
Dai Rios	人事主管	爱丁堡	$217,500
Jenette Caldwell	开发主管	纽约	$345,000
Yuri Berry	首席营销官 (CMO)	纽约	$675,000
Caesar Vance	售前支持	纽约	$106,450
Doris Wilder	销售助理	悉尼	$85,600
Angelica Ramos	首席执行官 (CEO)	伦敦	$1,200,000
Gavin Joyce	开发者	爱丁堡	$92,575
Jennifer Chang	区域主管	新加坡	$357,650
Brenden Wagner	软件工程师	旧金山	$206,850
Fiona Green	首席运营官 (COO)	旧金山	$850,000
Shou Itou	区域营销	东京	$163,000
Michelle House	集成专家	悉尼	$95,400
Suki Burks	开发者	伦敦	$114,500
Prescott Bartlett	技术作者	伦敦	$145,000
Gavin Cortez	团队主管	旧金山	$235,500
Martena Mccray	售后支持	爱丁堡	$324,050
Unity Butler	营销设计师	旧金山	$85,675
Howard Hatfield	办公室经理	旧金山	$164,500
Hope Fuentes	秘书	旧金山	$109,850
Vivian Harrell	财务总监	旧金山	$452,500
Timothy Mooney	办公室经理	伦敦	$136,200
Jackson Bradshaw	总监	纽约	$645,750
Olivia Liang	支持工程师	新加坡	$234,500
Bruno Nash	软件工程师	伦敦	$163,500
Sakura Yamamoto	支持工程师	东京	$139,575
Thor Walton	开发者	纽约	$98,540
Finn Camacho	支持工程师	旧金山	$87,500
Serge Baldwin	数据协调员	新加坡	$138,575
Zenaida Frank	软件工程师	纽约	$125,250
Zorita Serrano	软件工程师	旧金山	$115,000
Jennifer Acosta	初级 JavaScript 开发者	爱丁堡	$75,650
Cara Stevens	销售助理	纽约	$145,600
Hermione Butler	区域主管	伦敦	$356,250
Lael Greer	系统管理员	伦敦	$103,500
Jonas Alexander	开发者	旧金山	$86,500
Shad Decker	区域主管	爱丁堡	$183,000
Michael Bruce	JavaScript 开发者	新加坡	$183,000
Donna Snider	客户支持	纽约	$112,000

现在这很酷，但如果图表可以反映应用于它的任何过滤效果，岂不是更好？继续阅读...

异步图表

要实现这一点，我们必须对上面的代码进行一些修改。我们将把办公室计数从 $(document).ready(...) 监听器中移出，并将其放入自己的函数中，并用对我们新函数的调用替换它。该函数应类似于以下内容

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

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

    // And map it to the format highcharts uses
    return $.map(counts, function (val, key) {
        return {
            name: key,
            y: val,
        };
    });
}

使用这种方法意味着，随着过滤的进行，职位会从图表中消失，从而带来更简洁的图表体验。

现在，剩下的就是添加一个监听器，用于在过滤发生时告诉图表使用新数据更新 - 为此，我们使用 draw。

table.on('draw', function () {
    // Set the data for the first series to be the map returned from the chartData function
    myChart.series[0].setData(chartData(table));
});

下面给出了此代码的示例，和以前一样，提供了展示完整运行代码的在线版本。

姓名	职位	办公室	薪水
Tiger Nixon	系统架构师	爱丁堡	$320,800
Garrett Winters	会计	东京	$170,750
Ashton Cox	初级技术作者	旧金山	$86,000
Cedric Kelly	高级 JavaScript 开发者	爱丁堡	$433,060
Airi Satou	会计	东京	$162,700
Brielle Williamson	集成专家	纽约	$372,000
Herrod Chandler	销售助理	旧金山	$137,500
Rhona Davidson	集成专家	东京	$327,900
Colleen Hurst	JavaScript 开发者	旧金山	$205,500
Sonya Frost	软件工程师	爱丁堡	$103,600
Jena Gaines	办公室经理	伦敦	$90,560
Quinn Flynn	支持主管	爱丁堡	$342,000
Charde Marshall	区域主管	旧金山	$470,600
Haley Kennedy	高级营销设计师	伦敦	$313,500
Tatyana Fitzpatrick	区域主管	伦敦	$385,750
Michael Silva	营销设计师	伦敦	$198,500
Paul Byrd	首席财务官 (CFO)	纽约	$725,000
Gloria Little	系统管理员	纽约	$237,500
Bradley Greer	软件工程师	伦敦	$132,000
Dai Rios	人事主管	爱丁堡	$217,500
Jenette Caldwell	开发主管	纽约	$345,000
Yuri Berry	首席营销官 (CMO)	纽约	$675,000
Caesar Vance	售前支持	纽约	$106,450
Doris Wilder	销售助理	悉尼	$85,600
Angelica Ramos	首席执行官 (CEO)	伦敦	$1,200,000
Gavin Joyce	开发者	爱丁堡	$92,575
Jennifer Chang	区域主管	新加坡	$357,650
Brenden Wagner	软件工程师	旧金山	$206,850
Fiona Green	首席运营官 (COO)	旧金山	$850,000
Shou Itou	区域营销	东京	$163,000
Michelle House	集成专家	悉尼	$95,400
Suki Burks	开发者	伦敦	$114,500
Prescott Bartlett	技术作者	伦敦	$145,000
Gavin Cortez	团队主管	旧金山	$235,500
Martena Mccray	售后支持	爱丁堡	$324,050
Unity Butler	营销设计师	旧金山	$85,675
Howard Hatfield	办公室经理	旧金山	$164,500
Hope Fuentes	秘书	旧金山	$109,850
Vivian Harrell	财务总监	旧金山	$452,500
Timothy Mooney	办公室经理	伦敦	$136,200
Jackson Bradshaw	总监	纽约	$645,750
Olivia Liang	支持工程师	新加坡	$234,500
Bruno Nash	软件工程师	伦敦	$163,500
Sakura Yamamoto	支持工程师	东京	$139,575
Thor Walton	开发者	纽约	$98,540
Finn Camacho	支持工程师	旧金山	$87,500
Serge Baldwin	数据协调员	新加坡	$138,575
Zenaida Frank	软件工程师	纽约	$125,250
Zorita Serrano	软件工程师	旧金山	$115,000
Jennifer Acosta	初级 JavaScript 开发者	爱丁堡	$75,650
Cara Stevens	销售助理	纽约	$145,600
Hermione Butler	区域主管	伦敦	$356,250
Lael Greer	系统管理员	伦敦	$103,500
Jonas Alexander	开发者	旧金山	$86,500
Shad Decker	区域主管	爱丁堡	$183,000
Michael Bruce	JavaScript 开发者	新加坡	$183,000
Donna Snider	客户支持	纽约	$112,000

这不仅适用于 DataTables 的全局过滤器输入，也适用于 SearchPanes 等扩展，您可以在以下示例中看到。这里的一个细微差别是，我们正在绘制职位列。同样，我已经链接了一个在线版本。

姓名	职位	办公室	薪水
Tiger Nixon	系统架构师	爱丁堡	$320,800
Garrett Winters	会计	东京	$170,750
Ashton Cox	初级技术作者	旧金山	$86,000
Cedric Kelly	高级 JavaScript 开发者	爱丁堡	$433,060
Airi Satou	会计	东京	$162,700
Brielle Williamson	集成专家	纽约	$372,000
Herrod Chandler	销售助理	旧金山	$137,500
Rhona Davidson	集成专家	东京	$327,900
Colleen Hurst	JavaScript 开发者	旧金山	$205,500
Sonya Frost	软件工程师	爱丁堡	$103,600
Jena Gaines	办公室经理	伦敦	$90,560
Quinn Flynn	支持主管	爱丁堡	$342,000
Charde Marshall	区域主管	旧金山	$470,600
Haley Kennedy	高级营销设计师	伦敦	$313,500
Tatyana Fitzpatrick	区域主管	伦敦	$385,750
Michael Silva	营销设计师	伦敦	$198,500
Paul Byrd	首席财务官 (CFO)	纽约	$725,000
Gloria Little	系统管理员	纽约	$237,500
Bradley Greer	软件工程师	伦敦	$132,000
Dai Rios	人事主管	爱丁堡	$217,500
Jenette Caldwell	开发主管	纽约	$345,000
Yuri Berry	首席营销官 (CMO)	纽约	$675,000
Caesar Vance	售前支持	纽约	$106,450
Doris Wilder	销售助理	悉尼	$85,600
Angelica Ramos	首席执行官 (CEO)	伦敦	$1,200,000
Gavin Joyce	开发者	爱丁堡	$92,575
Jennifer Chang	区域主管	新加坡	$357,650
Brenden Wagner	软件工程师	旧金山	$206,850
Fiona Green	首席运营官 (COO)	旧金山	$850,000
Shou Itou	区域营销	东京	$163,000
Michelle House	集成专家	悉尼	$95,400
Suki Burks	开发者	伦敦	$114,500
Prescott Bartlett	技术作者	伦敦	$145,000
Gavin Cortez	团队主管	旧金山	$235,500
Martena Mccray	售后支持	爱丁堡	$324,050
Unity Butler	营销设计师	旧金山	$85,675
Howard Hatfield	办公室经理	旧金山	$164,500
Hope Fuentes	秘书	旧金山	$109,850
Vivian Harrell	财务总监	旧金山	$452,500
Timothy Mooney	办公室经理	伦敦	$136,200
Jackson Bradshaw	总监	纽约	$645,750
Olivia Liang	支持工程师	新加坡	$234,500
Bruno Nash	软件工程师	伦敦	$163,500
Sakura Yamamoto	支持工程师	东京	$139,575
Thor Walton	开发者	纽约	$98,540
Finn Camacho	支持工程师	旧金山	$87,500
Serge Baldwin	数据协调员	新加坡	$138,575
Zenaida Frank	软件工程师	纽约	$125,250
Zorita Serrano	软件工程师	旧金山	$115,000
Jennifer Acosta	初级 JavaScript 开发者	爱丁堡	$75,650
Cara Stevens	销售助理	纽约	$145,600
Hermione Butler	区域主管	伦敦	$356,250
Lael Greer	系统管理员	伦敦	$103,500
Jonas Alexander	开发者	旧金山	$86,500
Shad Decker	区域主管	爱丁堡	$183,000
Michael Bruce	JavaScript 开发者	新加坡	$183,000
Donna Snider	客户支持	纽约	$112,000

带数据处理的图表

当然，也可以对来自 DataTable 的数据进行更多处理。下面的示例创建了一个柱状图，显示了示例表格中员工的平均薪水，按办公室分类。当然，这里还有一个链接，指向在线版本。

姓名	职位	办公室	薪水
Tiger Nixon	系统架构师	爱丁堡	$320,800
Garrett Winters	会计	东京	$170,750
Ashton Cox	初级技术作者	旧金山	$86,000
Cedric Kelly	高级 JavaScript 开发者	爱丁堡	$433,060
Airi Satou	会计	东京	$162,700
Brielle Williamson	集成专家	纽约	$372,000
Herrod Chandler	销售助理	旧金山	$137,500
Rhona Davidson	集成专家	东京	$327,900
Colleen Hurst	JavaScript 开发者	旧金山	$205,500
Sonya Frost	软件工程师	爱丁堡	$103,600
Jena Gaines	办公室经理	伦敦	$90,560
Quinn Flynn	支持主管	爱丁堡	$342,000
Charde Marshall	区域主管	旧金山	$470,600
Haley Kennedy	高级营销设计师	伦敦	$313,500
Tatyana Fitzpatrick	区域主管	伦敦	$385,750
Michael Silva	营销设计师	伦敦	$198,500
Paul Byrd	首席财务官 (CFO)	纽约	$725,000
Gloria Little	系统管理员	纽约	$237,500
Bradley Greer	软件工程师	伦敦	$132,000
Dai Rios	人事主管	爱丁堡	$217,500
Jenette Caldwell	开发主管	纽约	$345,000
Yuri Berry	首席营销官 (CMO)	纽约	$675,000
Caesar Vance	售前支持	纽约	$106,450
Doris Wilder	销售助理	悉尼	$85,600
Angelica Ramos	首席执行官 (CEO)	伦敦	$1,200,000
Gavin Joyce	开发者	爱丁堡	$92,575
Jennifer Chang	区域主管	新加坡	$357,650
Brenden Wagner	软件工程师	旧金山	$206,850
Fiona Green	首席运营官 (COO)	旧金山	$850,000
Shou Itou	区域营销	东京	$163,000
Michelle House	集成专家	悉尼	$95,400
Suki Burks	开发者	伦敦	$114,500
Prescott Bartlett	技术作者	伦敦	$145,000
Gavin Cortez	团队主管	旧金山	$235,500
Martena Mccray	售后支持	爱丁堡	$324,050
Unity Butler	营销设计师	旧金山	$85,675
Howard Hatfield	办公室经理	旧金山	$164,500
Hope Fuentes	秘书	旧金山	$109,850
Vivian Harrell	财务总监	旧金山	$452,500
Timothy Mooney	办公室经理	伦敦	$136,200
Jackson Bradshaw	总监	纽约	$645,750
Olivia Liang	支持工程师	新加坡	$234,500
Bruno Nash	软件工程师	伦敦	$163,500
Sakura Yamamoto	支持工程师	东京	$139,575
Thor Walton	开发者	纽约	$98,540
Finn Camacho	支持工程师	旧金山	$87,500
Serge Baldwin	数据协调员	新加坡	$138,575
Zenaida Frank	软件工程师	纽约	$125,250
Zorita Serrano	软件工程师	旧金山	$115,000
Jennifer Acosta	初级 JavaScript 开发者	爱丁堡	$75,650
Cara Stevens	销售助理	纽约	$145,600
Hermione Butler	区域主管	伦敦	$356,250
Lael Greer	系统管理员	伦敦	$103,500
Jonas Alexander	开发者	旧金山	$86,500
Shad Decker	区域主管	爱丁堡	$183,000
Michael Bruce	JavaScript 开发者	新加坡	$183,000
Donna Snider	客户支持	纽约	$112,000

此示例的代码与前面的示例非常相似，只是对我们创建的额外函数进行了一些调整。

function getSalaries(table) {
    var salaryCounts = {};
    var salary = {};

    // Get the row indexes for the rows displayed under the current search
    var indexes = table.rows({ search: 'applied' }).indexes().toArray();

    // For each row, extract the office and add the salary to the array
    for (var i = 0; i < indexes.length; i++) {
        var office = table.cell(indexes[i], 2).data();
        if (salaryCounts[office] === undefined) {
            salaryCounts[office] = [
                +table
                    .cell(indexes[i], 3)
                    .data()
                    .replace(/[^0-9.]/g, ''),
            ];
        } else {
            salaryCounts[office].push(
                +table
                    .cell(indexes[i], 3)
                    .data()
                    .replace(/[^0-9.]/g, '')
            );
        }
    }

    // Extract the office names that are present in the table
    var keys = Object.keys(salaryCounts);

    // For each office work out the average salary
    for (var i = 0; i < keys.length; i++) {
        var length = salaryCounts[keys[i]].length;
        var total = salaryCounts[keys[i]].reduce((a, b) => a + b, 0);
        salary[keys[i]] = total / length;
    }

    return salary;
}

这里我们有两个对象，第一个 salary 对象将保存我们用于柱状图的最终数据，而 salaryCounts 是一个临时对象，它将允许我们执行一些额外的处理。

我们还必须对 series 变量进行更改，数据现在是 salary 数组的值。我们还需要声明一个 x 轴和一个 y 轴。将所有这些放在一起，我们就得到了以下脚本，该脚本用于上面的示例。

$(document).ready(function () {
    var table = $('#example').DataTable();
    var salary = getSalaries(table);

    // Declare axis for the column graph
    var axis = {
        id: 'salary',
        min: 0,
        title: {
            text: 'Average Salary',
        },
    };

    // Declare inital series with the values from the getSalaries function
    var series = {
        name: 'Overall',
        data: Object.values(salary),
    };

    var myChart = Highcharts.chart('container', {
        chart: {
            type: 'column',
        },
        title: {
            text: 'Average Salary',
        },
        xAxis: {
            categories: Object.keys(salary),
        },
        yAxis: axis,
        series: [series],
    });

    // On draw, get updated salaries and refresh axis and series
    table.on('draw', function () {
        salary = getSalaries(table);
        myChart.axes[0].categories = Object.keys(salary);
        myChart.series[0].setData(Object.values(salary));
    });
});

function getSalaries(table) {
    var salaryCounts = {};
    var salary = {};

    // Get the row indexes for the rows displayed under the current search
    var indexes = table.rows({ search: 'applied' }).indexes().toArray();

    // For each row, extract the office and add the salary to the array
    for (var i = 0; i < indexes.length; i++) {
        var office = table.cell(indexes[i], 2).data();
        if (salaryCounts[office] === undefined) {
            salaryCounts[office] = [
                +table
                    .cell(indexes[i], 3)
                    .data()
                    .replace(/[^0-9.]/g, ''),
            ];
        } else {
            salaryCounts[office].push(
                +table
                    .cell(indexes[i], 3)
                    .data()
                    .replace(/[^0-9.]/g, '')
            );
        }
    }

    // Extract the office names that are present in the table
    var keys = Object.keys(salaryCounts);

    // For each office work out the average salary
    for (var i = 0; i < keys.length; i++) {
        var length = salaryCounts[keys[i]].length;
        var total = salaryCounts[keys[i]].reduce((a, b) => a + b, 0);
        salary[keys[i]] = total / length;
    }

    return salary;
}

正如我提到的，Highcharts 提供了各种不同的图表类型，通过利用 DataTables API，可以轻松创建动态图表，与 DataTable 一起运行。

希望这将有助于为您的 DataTables 实现添加另一个维度。