DHTMLX Pivot數據透視表能快速地對數據進行計數、總計、平均和執行許多其他操作。近日，DHTMLX Pivot發布了2.1版本，該版本擴展了開發人員通過新增的 CSS 樣式選項、HTML 模板以及數字和日期的自定義格式修改表格外觀的能力。此外，該版本還增加了凍結右側列的功能、擴展了導出到 Excel 和 CSV 的設置，并進行了一些細微的改進。此外，我們的團隊還準備了集成演示，讓您更輕松地將我們的JavaScript 數據透視表與 React、Angular、Vue 和 Svelte 結合使用。

立即獲取DHTMLX Pivot 2.1正式版

以下是DHTMLX Pivot 2.1 新功能的詳細概述：

數字和日期字段的靈活格式

在將數據透視表集成到高度重視國際業務的 Web 應用程序中時，務必牢記不同國家/地區在數字和日期格式方面存在的差異。忽視這一點可能會導致數據誤解，或給全球團隊帶來糟糕的用戶體驗。

借助 DHTMLX Pivot 中新增的語言環境相關格式支持，您可以確保日期和數字字段將根據應用當前的語言環境自動調整。您可以通過在本例中切換語言環境來測試其工作方式，并關注“利潤”和“日期”列的格式變化。

可以在語言環境級別更改日期和數字格式，但如果需要，您還可以使用fields屬性的格式參數將自定義格式應用于特定的日期和數字字段：

• 自定義數字格式

格式參數允許指定分數位數和整數位數以及數值之前（前綴）和之后（后綴）的符號：

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

默認情況下，數值的小數部分顯示限制為3位，整數部分采用組分隔。

• 自定義日期格式

默認日期格式（“％d.％m.％Y”）通過當前語言環境的dateFormat參數設置，但您可以通過屬性的format參數重新定義它：

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

當不需要對特定字段進行格式化時，可以通過將格式參數的值更改為false來禁用它。

單元格和標題的新樣式選項

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

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";
                }
            }
        }        
    },
...

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

類似地，您可以通過headerShape屬性的cellStyle參數修改標題的外觀：

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

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

這些樣式增強功能將使您的數據透視表更具可讀性和信息性，這對于儀表板、財務報告和任何數據驅動的應用程序至關重要。

數據透視表單元格的自定義 HTML 模板

延續 v2.1 中一系列視覺增強功能，我們也很高興地推出了一種使用模板在標題和正文單元格中應用自定義 HTML 內容的新方法。之前，您可以通過headerShape和tableShape屬性中相應的 template 參數添加模板。現在，您可以使用新的pivot.template助手，超越純文本，用多樣化的內容豐富您的 JS 數據透視表。

在上面的數據透視表中，您可以看到幾個在單元格中集成 HTML 模板的生動示例。為了清晰起見，以下是如何根據字段（id、user_score）添加旗幟和星形圖標的方法：

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 模板，您可以根據需要定制數據透視表中的數據呈現，從而提高應用程序的可用性和視覺吸引力。

凍結右側列

在 v2.1 中，我們的開發團隊還添加了凍結數據透視表最右側列（總計或匯總字段）的選項。雖然左側列的凍結功能自 v2.0 起就已可用，但新增的“右側”選項擴展了此功能，從而實現更高效的數據分析和決策。此功能讓您在水平滾動瀏覽大型數據集時，始終能夠在表格兩側清晰地查看關鍵數據。
查看示例 >您可以通過編程方式在tableShape屬性的split
參數 中啟用新選項。只需將right屬性的值設置為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,
   }
})

總體而言，凍結數據透視表列的能力可確保更好地控制數據呈現并簡化大型數據集的分析。

擴展導出設置至 Excel 和 CSV 格式

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

以下是擴展導出設置至 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
    }
});
...

此外，我們還必須提及一些與使用指定格式和模板將數據導出到 Excel 相關的增強功能：

• 日期和數字字段以默認格式或指定的自定義格式導出為原始值。
• 如果字段指定了模板，導出時將使用該模板的渲染值，而不是原始數據。即使指定字段定義了格式，模板的優先級也高于格式。

該文檔包含有關新 Pivot 導出設置到 Excel 和 CSV 的

其他改進

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

另一個有用的補充是能夠通過外部輸入過濾數據，如下例所示。

關于慧都科技：

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

下載|體驗更多DHTMLX，請咨詢，或撥打產品熱線：023-68661681