DHTMLX Suite 是一個(gè)用于構(gòu)建跨瀏覽器Web應(yīng)用和移動(dòng)應(yīng)用的強(qiáng)大JavaScript UI庫(kù)。DHTMLX UI 組件庫(kù)允許您更快地構(gòu)建跨平臺(tái)、跨瀏覽器 Web 和移動(dòng)應(yīng)用程序。它包括一組豐富的即用式 HTML5 組件，這些組件可以輕松組合到單個(gè)應(yīng)用程序界面中。

DHTMLX Spreadsheet正版試用下載

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

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

新的內(nèi)置和自定義主題

Web 應(yīng)用程序的視覺外觀通常與功能方面一樣重要，以確保最佳用戶體驗(yàn)。基于Google的Material Design，我們的UI小部件庫(kù)在樣式方面一直非常靈活，允許您使用具有自定義設(shè)置的CSS類來(lái)調(diào)整小部件中任何元素的外觀。但是現(xiàn)在，使用有用的輔助工具，整個(gè)樣式設(shè)置過(guò)程可以更簡(jiǎn)單，更省時(shí)。

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

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

或者，您可以通過(guò) 數(shù)據(jù) 所選容器的屬性。了解如何在 .

如果您查看默認(rèn)主題（淺色）的樣式設(shè)置，您可以在 CSS 變量中看到配色方案的變量。它們使您能夠自動(dòng)更改其他主題的配色方案（以 HSL 格式指定）。更準(zhǔn)確地說(shuō)，當(dāng)您從淺色主題的根元素中的配色方案中修改 CSS 變量的任何值時(shí)，也會(huì)針對(duì)其他基本主題實(shí)時(shí)計(jì)算該值。

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

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

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

您還可以使用顏色選取器組件動(dòng)態(tài)覆蓋原色。

基于原色的其他 CSS 變量將相應(yīng)地重新計(jì)算。例如，焦點(diǎn)顏色將按如下方式計(jì)算：

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

當(dāng)需要在單個(gè)主題中進(jìn)行調(diào)整時(shí)，您應(yīng)該在 數(shù)據(jù)-DHX 主題 屬性。查找有關(guān)此內(nèi)容的更多詳細(xì)信息 文檔頁(yè)面.

除此之外，已經(jīng)有可能 配置自定義主題 通過(guò)覆蓋基本主題中內(nèi)部 CSS 變量的值。與預(yù)定義主題類似，自定義主題通過(guò) 設(shè)置主題（） 方法。

此外，還有一種更新穎、更直接的方法可以根據(jù)您的項(xiàng)目要求設(shè)置套件小部件的樣式。此版本的 DHTMLX 套件庫(kù)補(bǔ)充了一個(gè)特殊的 .

該工具包括幾個(gè)自定義主題，可以使用多個(gè)預(yù)設(shè)通過(guò)直觀的 UI 進(jìn)行修改。主題準(zhǔn)備就緒后，您將能夠?qū)⑵渲苯訌?fù)制并粘貼到您的 Web 項(xiàng)目中。

輔助功能支持

隨著v8.0的發(fā)布，我們終于可以說(shuō)DHTMLX套件了。 （WCAG 2.0）的最高AAA級(jí)別。除了以前可用的鍵盤導(dǎo)航，新套件還提供了另外兩個(gè)缺失的部分 - 高對(duì)比度主題和 WAI-ARIA 支持。這意味著現(xiàn)在您完全有能力構(gòu)建可供殘障人士和殘障人士使用的 Web 應(yīng)用程序。

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

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

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

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

但是，如果您必須處理大型數(shù)據(jù)集并且只需要查看其中的特定部分，該怎么辦？這不是問(wèn)題，因?yàn)槟袡C(jī)會(huì)使用可選的設(shè)置自定義日期范圍 開始日期 和 結(jié)束日期 參數(shù)在 系列 財(cái)產(chǎn)。

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

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 參數(shù)，圖表將顯示基于其他參數(shù)和數(shù)據(jù)集的數(shù)據(jù)（即，從數(shù)據(jù)集中找到的最早年份的 1 月 1 日開始）。在我們的例子中，圖表將顯示從“01/01/22”到“20/08/23”（包括“01/01/22”）期間的信息。

有關(guān)熱圖圖表配置的此特性和其他特性的更多詳細(xì)信息，請(qǐng)參閱 文檔.

作為一個(gè)不錯(cuò)的獎(jiǎng)勵(lì)，我們還創(chuàng)建了熱圖圖表與流行的DHTMLX工具集成的示例，用于項(xiàng)目管理 - 甘特, 活動(dòng)日歷和 調(diào)度.它將幫助您獲得一個(gè)更有用的信息來(lái)源，以便更有效地處理項(xiàng)目。

請(qǐng)注意，日歷熱圖圖表僅在 DHTMLX 圖表和 DHTMLX 套件的專業(yè)版中可用。

拖放網(wǎng)格中的多個(gè)選定行 （PRO）

DHTMLX Grid是我們套件庫(kù)中使用最廣泛的小部件之一。難怪我們經(jīng)常收到許多關(guān)于此小部件可能改進(jìn)的請(qǐng)求。對(duì)于此版本，我們準(zhǔn)備了幾個(gè)重要的網(wǎng)格更新。我們從能力開始 同時(shí)拖放任意數(shù)量的選定行.

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

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

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

請(qǐng)注意，此功能僅在 DHTMLX Grid 和 DHTMLX Suite 的專業(yè)版中可用。

在網(wǎng)格/樹網(wǎng)格的日期選取器編輯器中指定時(shí)間

套件庫(kù)的新版本 8.0 擴(kuò)展了 在網(wǎng)格和樹網(wǎng)格小部件中。從現(xiàn)在開始，您可以使最終用戶在兩個(gè)小部件中設(shè)置時(shí)間和日期，方法與DHTMLX日歷中相同。

在引擎蓋下，它是通過(guò)傳遞來(lái)實(shí)現(xiàn)的 （除了 馬克, 禁用日期, 價(jià)值, 范圍和 日期格式） 到 編輯器配置 對(duì)象，在網(wǎng)格或樹網(wǎng)格小組件中配置日期選取器編輯器。正如您在下面的示例中看到的，網(wǎng)格列“開始日期”帶有“日期”類型編輯器，以及 時(shí)間選取器 參數(shù)在 編輯器配置 。

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

在構(gòu)建業(yè)務(wù)Web應(yīng)用程序時(shí)，為表格數(shù)據(jù)和各種圖形或圖表提供導(dǎo)出選項(xiàng)會(huì)很有好處。例如，最終用戶可能需要在會(huì)議期間脫機(jī)處理一些與項(xiàng)目相關(guān)的信息，或者通過(guò)電子郵件將其發(fā)送給同事。這就是為什么大多數(shù)信息打包套件小部件，即DHTMLX圖表，現(xiàn)在包括將數(shù)據(jù)轉(zhuǎn)換為PDF和PNG格式的可能性。

Chart小部件中的導(dǎo)出功能與DHTMLX圖中的導(dǎo)出功能一樣。DHTMLX圖表的API現(xiàn)在具有 和方法，可通過(guò)以下方式使用chart.export對(duì)象調(diào)用這些方法：

• 圖表.導(dǎo)出.pdf（配置）
• 導(dǎo)出.png文件（配置）

在用戶端，將通過(guò)相應(yīng)的UI按鈕執(zhí)行導(dǎo)出為PDF和PNG。您可以使用以下命令嘗試它在實(shí)踐中的工作方式 。

PDF/PNG格式的導(dǎo)出可通過(guò)我們的在線導(dǎo)出服務(wù)免費(fèi)獲得。默認(rèn)情況下，導(dǎo)出的圖表上會(huì)有水印。擁有有效支持計(jì)劃的開發(fā)人員將能夠在其支持計(jì)劃期間導(dǎo)出不帶水印的圖表。如果您不想將數(shù)據(jù)發(fā)送到我們的在線服務(wù)，我們將提供一個(gè)獨(dú)立的導(dǎo)出模塊，您可以將其安裝為Docker映像。我們將根據(jù)DHTMLX套件的商業(yè)、企業(yè)和終極許可證免費(fèi)提供此模塊，或者您可以在購(gòu)買DHTMLX圖表許可證的基礎(chǔ)上再購(gòu)買此模塊。

網(wǎng)格和TreeGrid中的新凍結(jié)選項(xiàng)

凍結(jié)列和行的功能是Grid和TreeGrid小部件提供的最流行的功能之一。在v8.0中，我們使用新選項(xiàng)對(duì)其進(jìn)行了擴(kuò)展。以前，最終用戶可以在表格的左側(cè)設(shè)置列，在表格的頂部設(shè)置行。現(xiàn)在，他們可以對(duì)右側(cè)的列和底部的行執(zhí)行相同的操作。因此，最終用戶分析表格數(shù)據(jù)將更加方便。

以編程方式，凍結(jié)的右側(cè)列和底部行相應(yīng)地使用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 ,
}) ;

因此，如有必要，您可以凍結(jié)表所有邊的任意數(shù)量的記錄，只保留中間部分可滾動(dòng)。

了解更多詳細(xì)更新，

甘特圖控件交流群：764148812    歡迎進(jìn)群交流討論