在 Tabulator 中计算行和列百分比

Question

这是我的制表符

因为我放置了两个单选按钮来计算百分比。一个将计算行明智的百分比，另一个将计算列明智的百分比。这意味着在 row Wise 中，将添加男性和女性的百分比，并且将得出相应的男性和女性百分比。在列中，将添加男性总数，然后我们将获得每个地区的男性百分比。我无法在制表符中找到任何方法来执行此操作。请帮助我完成它。

我的 Tabulator 代码是

initTable = function (data) {
var headerMenu = function () {
    var menu = [];
    var columns = this.getColumns();
    for (let column of columns) {
        let icon = document.createElement("i");
        icon.classList.add("fa");
        icon.classList.add(column.isVisible() ? "fa-check-square" : "fa-square");
        let label = document.createElement("span");
        let title = document.createElement("span");
        title.textContent = " " + column.getDefinition().title;
        label.appendChild(icon);
        label.appendChild(title);
        menu.push({
            label: label,
            action: function (e) {
                e.stopPropagation();
                column.toggle();
                if (column.isVisible()) {
                    icon.classList.remove("fa-square");
                    icon.classList.add("fa-check-square");
                } else {
                    icon.classList.remove("fa-check-square");
                    icon.classList.add("fa-square");
                }
            }
        });
    }

    return menu;
};
if (data && Object.keys(data[0])) {
    let cols = [];
    Object.keys(data[0]) ? Object.keys(data[0]).map((v) => {
        if (v != "Geom" && v != "Query" && v != "Additional") {
            cols.push({
                title: v, field: v, formatter: function (cell) {
                    var value = cell.getValue();
                    if (checkKeyInFilters(cell.getField(), data[0].Query.Filters)) {
                        return "<span style='color:#53bfd4; font-weight:bold;'>" + value + "</span>";
                    } else {
                        return "<span>" + value + "</span>";
                    }
                }, headerMenu: headerMenu,
                //topCalc: (!checkKeyInFilters(v, data[0].Query.Filters) ? "sum" : undefined)
            });
        }
        return v;
    }) : undefined;
    window.tableAnalyis = new Tabulator("#analysis-table", {
        layout: "fitColumns",
        responsiveLayout: "collapse",
        data: data,
        columns: cols,
    });
}

}

Answer 1

做到了！我所要做的就是创建一个新函数并通过获取表格数据来计算百分比。

密码是：

ChangeIntoPercentile = function (type) {
    const data2 = window.tableAnalyis.getData();
    var Male_Sum = 0;
    var Female_Sum = 0;
    R_Wise_Percentage = [];
    T_Wise_Percentage = [];
    C_Wise_Percentage = [];
    for (i = 0; i < data2.length; i++) {
        Male_Sum += data2[i].Male;
        Female_Sum += data2[i].Female;
    }
    if (type == 'rowwise') {
        for (i = 0; i < data2.length; i++) {

            R_Wise_Percentage.push({ "District": data2[i].District, "Male Percentage %": parseFloat((data2[i].Male / (data2[i].Male + data2[i].Female)) * 100).toFixed(2), "Female Percenatge %": parseFloat((data2[i].Female / (data2[i].Male + data2[i].Female)) * 100).toFixed(2) });

        }    
        let cols = [];
        Object.keys(R_Wise_Percentage[0]) ? Object.keys(R_Wise_Percentage[0]).map((v) => {
            if (v != "Geom" && v != "Query" && v != "Additional") {
                cols.push({
                    title: v, field: v,  headerMenu: headerMenu,
                    //topCalc: (!checkKeyInFilters(v, data[0].Query.Filters) ? "sum" : undefined)
                });
            }
            return v;
        }) : undefined

            window.tableAnalyis.setData = new Tabulator("#analysis-table", {
                layout: "fitColumns",
                responsiveLayout: "collapse",
                data: R_Wise_Percentage,
                columns: cols,
            });
        }   
    else if (type == 'columnwise') {       
        for (i = 0; i < data2.length; i++) {

            C_Wise_Percentage.push({ "District": data2[i].District, "Male Percentage %": parseFloat((data2[i].Male / Male_Sum) * 100).toFixed(2), "Female Percenatge %": parseFloat((data2[i].Female / Female_Sum) * 100).toFixed(2) });
        }
        let cols = [];
        Object.keys(C_Wise_Percentage[0]) ? Object.keys(C_Wise_Percentage[0]).map((v) => {
            if (v != "Geom" && v != "Query" && v != "Additional") {
                cols.push({
                    title: v, field: v, headerMenu: headerMenu,
                    //topCalc: (!checkKeyInFilters(v, data[0].Query.Filters) ? "sum" : undefined)
                });
            }
            return v;
        }) : undefined

        window.tableAnalyis.setData = new Tabulator("#analysis-table", {
            layout: "fitColumns",
            responsiveLayout: "collapse",
            data: C_Wise_Percentage,
            columns: cols,
        });
    }
    else if (type == 'totalwise') {

        Total_Pop = Male_Sum + Female_Sum
        for (i = 0; i < data2.length; i++) {

            T_Wise_Percentage.push({ "District": data2[i].District, "Male Percentage %": parseFloat((data2[i].Male / Total_Pop) * 100).toFixed(2), "Female Percenatge %": parseFloat((data2[i].Female / Total_Pop) * 100).toFixed(2) });
        }
        let cols = [];
        Object.keys(T_Wise_Percentage[0]) ? Object.keys(T_Wise_Percentage[0]).map((v) => {
            if (v != "Geom" && v != "Query" && v != "Additional") {
                cols.push({
                    title: v, field: v, headerMenu: headerMenu,
                    //topCalc: (!checkKeyInFilters(v, data[0].Query.Filters) ? "sum" : undefined)
                });
            }
            return v;
        }) : undefined

        window.tableAnalyis.setData = new Tabulator("#analysis-table", {
            layout: "fitColumns",
            responsiveLayout: "collapse",
            data: T_Wise_Percentage,
            columns: cols,
        });
    }

         

    }

和HTML代码

 <input type="radio" id="RowWise" name="RowWise" value="RowWise" onchange ="ChangeIntoPercentile('rowwise')">
                <label for="RowWise">District Wise Male/Female Percentage</label><br>
                <input type="radio" id="ColumnWise" name="RowWise" value="ColumnWise" onchange ="ChangeIntoPercentile('columnwise')">
                <label for="ColumnWise">Get Column Wise Percentage for Male and Female</label><br>
                <input type="radio" id="TotalWise" name="RowWise" value="TotalWise" onchange ="ChangeIntoPercentile('totalwise')">
                <label for="TotalWise">Get Total Population Wise Percentage for Male and Female</label><br>

在 Tabulator 中计算行和列百分比

Calculate Row and Column Wise percentage in Tabulator

javascript

math

tabulator