DHTMLX Pivot數(shù)據(jù)透視表能快速地對(duì)數(shù)據(jù)進(jìn)行計(jì)數(shù)、總計(jì)、平均和執(zhí)行許多其他操作。近日，DHTMLX Pivot發(fā)布了2.1版本，該版本擴(kuò)展了開發(fā)人員通過(guò)新增的 CSS 樣式選項(xiàng)、HTML 模板以及數(shù)字和日期的自定義格式修改表格外觀的能力。此外，該版本還增加了凍結(jié)右側(cè)列的功能、擴(kuò)展了導(dǎo)出到 Excel 和 CSV 的設(shè)置，并進(jìn)行了一些細(xì)微的改進(jìn)。此外，我們的團(tuán)隊(duì)還準(zhǔn)備了集成演示，讓您更輕松地將我們的JavaScript 數(shù)據(jù)透視表與 React、Angular、Vue 和 Svelte 結(jié)合使用。

立即獲取DHTMLX Pivot 2.1正式版

以下是DHTMLX Pivot 2.1 新功能的詳細(xì)概述：

數(shù)字和日期字段的靈活格式

在將數(shù)據(jù)透視表集成到高度重視國(guó)際業(yè)務(wù)的 Web 應(yīng)用程序中時(shí)，務(wù)必牢記不同國(guó)家/地區(qū)在數(shù)字和日期格式方面存在的差異。忽視這一點(diǎn)可能會(huì)導(dǎo)致數(shù)據(jù)誤解，或給全球團(tuán)隊(duì)帶來(lái)糟糕的用戶體驗(yàn)。

借助 DHTMLX Pivot 中新增的語(yǔ)言環(huán)境相關(guān)格式支持，您可以確保日期和數(shù)字字段將根據(jù)應(yīng)用當(dāng)前的語(yǔ)言環(huán)境自動(dòng)調(diào)整。您可以通過(guò)在本例中切換語(yǔ)言環(huán)境來(lái)測(cè)試其工作方式，并關(guān)注“利潤(rùn)”和“日期”列的格式變化。

可以在語(yǔ)言環(huán)境級(jí)別更改日期和數(shù)字格式，但如果需要，您還可以使用fields屬性的格式參數(shù)將自定義格式應(yīng)用于特定的日期和數(shù)字字段：

• 自定義數(shù)字格式

格式參數(shù)允許指定分?jǐn)?shù)位數(shù)和整數(shù)位數(shù)以及數(shù)值之前（前綴）和之后（后綴）的符號(hào)：

 fields:[
   { id: "marketing", label: "Marketing", type:"number", formats:{
        prefix: "$", minimumFractionDigits: 2, maximumFractionDigits: 2 }
   }
]

默認(rèn)情況下，數(shù)值的小數(shù)部分顯示限制為3位，整數(shù)部分采用組分隔。

• 自定義日期格式

默認(rèn)日期格式（“％d.％m.％Y”）通過(guò)當(dāng)前語(yǔ)言環(huán)境的dateFormat參數(shù)設(shè)置，但您可以通過(guò)屬性的format參數(shù)重新定義它：

fields:[
  {id:"date", label:"Date", type:"date", format:"%M %d, %Y" }
]

當(dāng)不需要對(duì)特定字段進(jìn)行格式化時(shí)，可以通過(guò)將格式參數(shù)的值更改為false來(lái)禁用它。

單元格和標(biāo)題的新樣式選項(xiàng)

樣式設(shè)置或許并非直接決定數(shù)據(jù)透視表在數(shù)據(jù)分析中的效率，但它無(wú)疑會(huì)影響此類工具的易用性。DHTMLX Pivot 2.1 提供了一些樣式設(shè)置新功能，讓這一過(guò)程更加便捷。

const widget = new pivot.Pivot("#pivot", {
    tableShape: {
        totalColumn: true,
        totalRow:true,
        cellStyle: (field, value, area, method, isTotal) => {
            if (field === "status" && area === "rows" && value) {
                if (value === "Down") {
                    return "status-down";
                } else if (value === "Up") {
                    return "status-up";
                } else if (value === "Idle") {
                    return "status-idle";
                }
            }
        }        
    },
...

因此，您可以根據(jù)字段名稱、單元格值、單元格所屬的表部分甚至聚合操作動(dòng)態(tài)地為單元格分配自定義樣式。

類似地，您可以通過(guò)headerShape屬性的cellStyle參數(shù)修改標(biāo)題的外觀：

headerShape:{
    cellStyle:(field, value, area, method, isTotal) => {
        if(field == "streaming")
            return value ==="no"?"status-down":"status-up";
    }
}

<style>
   .wx-number {
       justify-content: start;
   }
</style>

這些樣式增強(qiáng)功能將使您的數(shù)據(jù)透視表更具可讀性和信息性，這對(duì)于儀表板、財(cái)務(wù)報(bào)告和任何數(shù)據(jù)驅(qū)動(dòng)的應(yīng)用程序至關(guān)重要。

數(shù)據(jù)透視表單元格的自定義 HTML 模板

延續(xù) v2.1 中一系列視覺(jué)增強(qiáng)功能，我們也很高興地推出了一種使用模板在標(biāo)題和正文單元格中應(yīng)用自定義 HTML 內(nèi)容的新方法。之前，您可以通過(guò)headerShape和tableShape屬性中相應(yīng)的 template 參數(shù)添加模板。現(xiàn)在，您可以使用新的pivot.template助手，超越純文本，用多樣化的內(nèi)容豐富您的 JS 數(shù)據(jù)透視表。

在上面的數(shù)據(jù)透視表中，您可以看到幾個(gè)在單元格中集成 HTML 模板的生動(dòng)示例。為了清晰起見(jiàn)，以下是如何根據(jù)字段（id、user_score）添加旗幟和星形圖標(biāo)的方法：

function cellTemplate(value, method, row, column) {
    const field = column.fields ? column.fields[row.$level] : column.field;
    if (field == "id")
        return idTemplate(value);
    if (field == "user_score")
        return scoreTemplate(value);
    else return value;
}

widget.api.intercept("render-table", ({ config: tableConfig }) => {
    tableConfig.columns = tableConfig.columns.map((c) => {
        if (c.area == "rows") {
            c.cell = pivot.template(({value, method, row, column}) => cellTemplate(value, method, row, column))  
        ...
        return c;
    });
});

使用 HTML 模板，您可以根據(jù)需要定制數(shù)據(jù)透視表中的數(shù)據(jù)呈現(xiàn)，從而提高應(yīng)用程序的可用性和視覺(jué)吸引力。

凍結(jié)右側(cè)列

在 v2.1 中，我們的開發(fā)團(tuán)隊(duì)還添加了凍結(jié)數(shù)據(jù)透視表最右側(cè)列（總計(jì)或匯總字段）的選項(xiàng)。雖然左側(cè)列的凍結(jié)功能自 v2.0 起就已可用，但新增的“右側(cè)”選項(xiàng)擴(kuò)展了此功能，從而實(shí)現(xiàn)更高效的數(shù)據(jù)分析和決策。此功能讓您在水平滾動(dòng)瀏覽大型數(shù)據(jù)集時(shí)，始終能夠在表格兩側(cè)清晰地查看關(guān)鍵數(shù)據(jù)。
查看示例 >您可以通過(guò)編程方式在tableShape屬性的split
參數(shù) 中啟用新選項(xiàng)。只需將right屬性的值設(shè)置為true即可，如以下代碼示例所示：

const widget = new pivot.Pivot("#pivot", {
   fields,
   data: dataset,
     tableShape:{
       split: {right: true},
       totalColumn: true,
     },
...//other settings
});

widget.api.on("render-table", ({ config: tableConfig }) => {
   const { config } = widget.api.getState();
   tableConfig.split = {
       right: config.values.length,
   }
})

總體而言，凍結(jié)數(shù)據(jù)透視表列的能力可確保更好地控制數(shù)據(jù)呈現(xiàn)并簡(jiǎn)化大型數(shù)據(jù)集的分析。

擴(kuò)展導(dǎo)出設(shè)置至 Excel 和 CSV 格式

數(shù)據(jù)導(dǎo)出是 Pivot 組件的另一項(xiàng)功能，在 v2.1 中新增了配置選項(xiàng)。現(xiàn)在，您可以導(dǎo)出更有意義的 Excel (XLSX) 和 CSV 格式的數(shù)據(jù)，以滿足不同用戶的特定需求。無(wú)論您是想添加文件名、導(dǎo)出不帶頁(yè)眉或頁(yè)腳的數(shù)據(jù)、指定導(dǎo)出數(shù)據(jù)透視表元素的樣式，還是排除任何樣式，現(xiàn)在都可以使用事件的選項(xiàng)對(duì)象中提供的新導(dǎo)出參數(shù)來(lái)實(shí)現(xiàn)。在應(yīng)用新的導(dǎo)出參數(shù)之前，需要使用方法訪問(wèn) Table 小部件 API 來(lái)觸發(fā)導(dǎo)出操作。

以下是擴(kuò)展導(dǎo)出設(shè)置至 Excel 格式的示例：

...
table.exec("export", {
    options: {
        format: "xlsx",
        fileName: "results", // a name of file, "data" by default
        header: false, // export header or not, true by default
        footer: false, // export footer or not, true by default
    }
});
...

此外，我們還必須提及一些與使用指定格式和模板將數(shù)據(jù)導(dǎo)出到 Excel 相關(guān)的增強(qiáng)功能：

• 日期和數(shù)字字段以默認(rèn)格式或指定的自定義格式導(dǎo)出為原始值。
• 如果字段指定了模板，導(dǎo)出時(shí)將使用該模板的渲染值，而不是原始數(shù)據(jù)。即使指定字段定義了格式，模板的優(yōu)先級(jí)也高于格式。

該文檔包含有關(guān)新 Pivot 導(dǎo)出設(shè)置到 Excel 和 CSV 的

其他改進(jìn)

除了此版本的主要功能外，我們還必須提及一些旨在提升 DHTMLX Pivot 用戶體驗(yàn)的小新功能。首先，它增強(qiáng)了鍵盤導(dǎo)航功能，并添加了可視化指示器。

另一個(gè)有用的補(bǔ)充是能夠通過(guò)外部輸入過(guò)濾數(shù)據(jù)，如下例所示。

關(guān)于慧都科技：

慧都科技是專注軟件工程、智能制造、石油工程三大行業(yè)的數(shù)字化解決方案服務(wù)商。在軟件工程領(lǐng)域，我們提供開發(fā)控件、研發(fā)管理、代碼開發(fā)、部署運(yùn)維等軟件開發(fā)全鏈路所需的產(chǎn)品，提供正版授權(quán)采購(gòu)、技術(shù)選型、個(gè)性化維保等服務(wù)，幫助客戶實(shí)現(xiàn)技術(shù)合規(guī)、降本增效與風(fēng)險(xiǎn)可控。慧都科技DHTMLX在中國(guó)的官方授權(quán)代理商，提供DHTMLX系列產(chǎn)品免費(fèi)試用，咨詢，正版銷售等于一體的專業(yè)化服務(wù)。DHTMLX專注于JavaScript和HTML5 UI小部件和庫(kù)，以幫助開發(fā)人員更快地構(gòu)建功能豐富的、交互式的Web界面。 遵循現(xiàn)代網(wǎng)絡(luò)開發(fā)的標(biāo)準(zhǔn)和做法，DHTMLX提供針對(duì)桌面和移動(dòng)設(shè)備定制的優(yōu)秀Web應(yīng)用程序框架。

下載|體驗(yàn)更多DHTMLX，請(qǐng)咨詢，或撥打產(chǎn)品熱線：023-68661681