DHTMLX Suite 是一個用于構建跨瀏覽器Web應用和移動應用的強大JavaScript UI庫。DHTMLX UI 組件庫允許您更快地構建跨平臺、跨瀏覽器 Web 和移動應用程序。它包括一組豐富的即用式 HTML5 組件，這些組件可以輕松組合到單個應用程序界面中。

DHTMLX Spreadsheet正版試用下載

DHTMLX Suite 迎來了8.0重大更新。此重大更新通過內置的可自定義主題（包括高對比度主題）和主題配置器工具，將您的樣式功能提升到一個新的水平。對比主題的出現和對 WAI-ARIA 屬性的支持現在使我們的庫完全可訪問。

還添加了流行的套件小部件，并引入了一系列值得注意的功能，即圖表和網格小部件。DHTMLX Chart獲得了一種新的圖表類型 - 日歷熱圖圖表，并將選項導出為PDF和PNG格式。網格補充了拖放多行的功能，timePicker編輯器，并擴展了凍結功能。此外，流行的套件小部件還有廣泛的次要功能和改進。

新的內置和自定義主題

Web 應用程序的視覺外觀通常與功能方面一樣重要，以確保最佳用戶體驗。基于Google的Material Design，我們的UI小部件庫在樣式方面一直非常靈活，允許您使用具有自定義設置的CSS類來調整小部件中任何元素的外觀。但是現在，使用有用的輔助工具，整個樣式設置過程可以更簡單，更省時。

DHTMLX Suite v8.0附帶了4個新的內置主題： 光, 黑暗, 淺高對比度和 深色高對比度.要將任何這些主題應用于項目中的特定套件小部件，您應該使用 設置主題（） 全局對象中的方法 敦煌.它需要兩個參數：

• 主題（必需）– 使用字符串值命名應設置的主題（默認值 – “淺色”）
• 容器（可選）– 指定將應用預配置主題的容器，采用 HTMLElement、容器的 ID 或布局單元格 document.documentElement（默認值）的 ID。

或者，您可以通過 數據 所選容器的屬性。了解如何在 .

如果您查看默認主題（淺色）的樣式設置，您可以在 CSS 變量中看到配色方案的變量。它們使您能夠自動更改其他主題的配色方案（以 HSL 格式指定）。更準確地說，當您從淺色主題的根元素中的配色方案中修改 CSS 變量的任何值時，也會針對其他基本主題實時計算該值。

--dhx-h-primary: 200;
--dhx-s-primary: 98%;
--dhx-l-primary: 40%;

可以通過以下方式更改所有套件主題的這些顏色：

<style>
:root {
--dhx-h-primary: 0;
--dhx-s-primary: 94%;
--dhx-l-primary: 30%;
}
</style>

您還可以使用顏色選取器組件動態覆蓋原色。

基于原色的其他 CSS 變量將相應地重新計算。例如，焦點顏色將按如下方式計算：

--dhx-color-focused: hsl(calc(var(--dhx-h-primary) + 10), var(--dhx-s-primary), var(--dhx-l-primary));

當需要在單個主題中進行調整時，您應該在 數據-DHX 主題 屬性。查找有關此內容的更多詳細信息 文檔頁面.

除此之外，已經有可能 配置自定義主題 通過覆蓋基本主題中內部 CSS 變量的值。與預定義主題類似，自定義主題通過 設置主題（） 方法。

此外，還有一種更新穎、更直接的方法可以根據您的項目要求設置套件小部件的樣式。此版本的 DHTMLX 套件庫補充了一個特殊的 .

該工具包括幾個自定義主題，可以使用多個預設通過直觀的 UI 進行修改。主題準備就緒后，您將能夠將其直接復制并粘貼到您的 Web 項目中。

輔助功能支持

隨著v8.0的發布，我們終于可以說DHTMLX套件了。 （WCAG 2.0）的最高AAA級別。除了以前可用的鍵盤導航，新套件還提供了另外兩個缺失的部分 - 高對比度主題和 WAI-ARIA 支持。這意味著現在您完全有能力構建可供殘障人士和殘障人士使用的 Web 應用程序。

DHTMLX 圖表中的新日歷熱圖圖表 （PRO）

從 v8.0 開始，我們的 允許使用新的圖表類型可視化數據 – .它用于使用二維日歷網格顯示數值數據如何隨時間變化，其中值被替換為顏色漸變。該圖表允許可視化不同時間段（從一周到一年）的數據，每個圖表單元格對應于一個工作日。使用明亮到暗淡的色譜和圖表上的圖例可以更輕松地比較數據并快速揭示各種模式或任何偏差。這種類型的圖表對于數據分析特別有用。

如果要將日歷熱圖圖表添加到項目中，則必須指定 類型：“日歷熱圖” 屬性。此類圖表的其他可用屬性包括 系列 （必需）和 legend（可選）。它們具有多個參數，可以在相應的配置中指定。

還值得注意的是，我們的新圖表提供了多種選項，用于根據日期范圍顯示上傳的數據。默認情況下，熱圖將顯示數據，從數據集中顯示的最早年份的 1 月 1 日到最晚年份的 12 月 31 日。

但是，如果您必須處理大型數據集并且只需要查看其中的特定部分，該怎么辦？這不是問題，因為您有機會使用可選的設置自定義日期范圍 開始日期 和 結束日期 參數在 系列 財產。

在上面的示例中，圖表涵蓋了從“20/01/22”到“20/08/23”（包括“20/08/23”）的時間段。

const config = {
type: "calendarHeatMap",
css: "dhx_widget--bordered",
series: [
{
value: "value",
date: "date",
dateFormat: "%d %M %Y",
startDate: "20 Jan 2022",
endDate: "20 Aug 2023",
// other series parameters
}
],
}

但是，例如，如果我們沒有指定 startDate 參數，圖表將顯示基于其他參數和數據集的數據（即，從數據集中找到的最早年份的 1 月 1 日開始）。在我們的例子中，圖表將顯示從“01/01/22”到“20/08/23”（包括“01/01/22”）期間的信息。

有關熱圖圖表配置的此特性和其他特性的更多詳細信息，請參閱 文檔.

作為一個不錯的獎勵，我們還創建了熱圖圖表與流行的DHTMLX工具集成的示例，用于項目管理 - 甘特, 活動日歷和 調度.它將幫助您獲得一個更有用的信息來源，以便更有效地處理項目。

請注意，日歷熱圖圖表僅在 DHTMLX 圖表和 DHTMLX 套件的專業版中可用。

拖放網格中的多個選定行 （PRO）

DHTMLX Grid是我們套件庫中使用最廣泛的小部件之一。難怪我們經常收到許多關于此小部件可能改進的請求。對于此版本，我們準備了幾個重要的網格更新。我們從能力開始 同時拖放任意數量的選定行.

通常情況下，最終用戶需要對表中的記錄重新排序，此功能將立即完成這項工作。要啟用此新穎性，您應該啟用 多選 使用 多選：真 配置屬性，并指定行的拖放，如下所示：

const grid = new dhx.Grid("grid", {
columns: [
// columns config
],
data: data,
selection: "row",
multiselection: true,
dragItem: "both" // or dragItem: "row"
});

因此，最終用戶將能夠使用“Ctrl + 單擊”組合選擇任意數量的行，并將它們拖動到網格上的正確位置。

請注意，此功能僅在 DHTMLX Grid 和 DHTMLX Suite 的專業版中可用。

在網格/樹網格的日期選取器編輯器中指定時間

套件庫的新版本 8.0 擴展了 在網格和樹網格小部件中。從現在開始，您可以使最終用戶在兩個小部件中設置時間和日期，方法與DHTMLX日歷中相同。

在引擎蓋下，它是通過傳遞來實現的 （除了 馬克, 禁用日期, 價值, 范圍和 日期格式） 到 編輯器配置 對象，在網格或樹網格小組件中配置日期選取器編輯器。正如您在下面的示例中看到的，網格列“開始日期”帶有“日期”類型編輯器，以及 時間選取器 參數在 編輯器配置 。

const config = {
columns: [
// other column configuration parameters
{ id: "start_date", header: [{ text: "Start date" }], type: "date", format: "%d/%m/%Y %H:%i", editorConfig: {timePicker: true} },
],
};

圖表中的新export

在構建業務Web應用程序時，為表格數據和各種圖形或圖表提供導出選項會很有好處。例如，最終用戶可能需要在會議期間脫機處理一些與項目相關的信息，或者通過電子郵件將其發送給同事。這就是為什么大多數信息打包套件小部件，即DHTMLX圖表，現在包括將數據轉換為PDF和PNG格式的可能性。

Chart小部件中的導出功能與DHTMLX圖中的導出功能一樣。DHTMLX圖表的API現在具有 和方法，可通過以下方式使用chart.export對象調用這些方法：

• 圖表.導出.pdf（配置）
• 導出.png文件（配置）

在用戶端，將通過相應的UI按鈕執行導出為PDF和PNG。您可以使用以下命令嘗試它在實踐中的工作方式 。

PDF/PNG格式的導出可通過我們的在線導出服務免費獲得。默認情況下，導出的圖表上會有水印。擁有有效支持計劃的開發人員將能夠在其支持計劃期間導出不帶水印的圖表。如果您不想將數據發送到我們的在線服務，我們將提供一個獨立的導出模塊，您可以將其安裝為Docker映像。我們將根據DHTMLX套件的商業、企業和終極許可證免費提供此模塊，或者您可以在購買DHTMLX圖表許可證的基礎上再購買此模塊。

網格和TreeGrid中的新凍結選項

凍結列和行的功能是Grid和TreeGrid小部件提供的最流行的功能之一。在v8.0中，我們使用新選項對其進行了擴展。以前，最終用戶可以在表格的左側設置列，在表格的頂部設置行。現在，他們可以對右側的列和底部的行執行相同的操作。因此，最終用戶分析表格數據將更加方便。

以編程方式，凍結的右側列和底部行相應地使用rightSplit和bottomSplit屬性啟用：

const grid = new dhx.Grid ( "grid" , {
// configuration parameters for columns
adjust: true ,
data: dataset,
topSplit: 2,
bottomSplit: 2,
leftSplit: 1,
rightSplit: 2,
selection: "row" ,
resizable: true ,
}) ;

因此，如有必要，您可以凍結表所有邊的任意數量的記錄，只保留中間部分可滾動。

了解更多詳細更新，

甘特圖控件交流群：764148812    歡迎進群交流討論