整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
天給大家分享一款超全功能的跨瀏覽器平臺甘特圖表庫DHTMLXGantt。
dhtmlx-gantt DHTMLX公司開源的 JavaScript 甘特圖/橫道圖/條狀圖類庫。用來快速構建顯示項目、進度，和隨著時間關聯的相關進展情況。
dhtmlx-Gantt 由位于俄羅斯圣彼得堡的DHTMLX公司開發的甘特圖組件，適用于B/S模式的Web應用開發。被廣泛應用于項目管理、建筑、IT軟件、汽車等領域。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>gantt demo</title>
<script src="dhtmlxgantt.js?v=6.0.0"></script>
<link rel="stylesheet" href="dhtmlxgantt.css?v=6.0.0">
<style>
html, body {
height: 100%;
padding: 0px;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<div id="gantt_here" style='width:100%; height:100%;'></div>
<script>
var taskList = {
data: [
{
id: 1, text: "Project #2", start_date: "01-04-2018", duration: 18, order: 10,
progress: 0.4, open: true
},
{
id: 2, text: "Task #1", start_date: "02-04-2018", duration: 8, order: 10,
progress: 0.6, parent: 1
},
{
id: 3, text: "Task #2", start_date: "11-04-2018", duration: 8, order: 20,
progress: 0.6, parent: 1
}
],
links: [
{id: 1, source: 1, target: 2, type: "1"},
{id: 2, source: 2, target: 3, type: "0"}
]
};
gantt.config.date_format = "%Y-%m-%d %H:%i";
gantt.init("gantt_here");
gantt.parse(taskList);
</script>
</body>
</html>為了配置甘特圖所需外觀，dhtmlxGantt提供了2個對象 config和templates。
gantt.config //日期，比例，控件等的配置選項。
gantt.templates //格式化甘特圖中使用的日期和標簽的模板。gantt.config.scale_unit = "year"; //按年顯示
gantt.config.step = 1.5; //設置時間刻度的步長（X軸）
gantt.config.date_scale = "%Y"; //日期尺度按年
gantt.init("gantt_here");gantt.config.scale_unit = "month"; //按月顯示
gantt.config.date_scale = "%F, %Y"; //設置時間刻度的格式（X軸） 多個尺度
gantt.config.scale_height = 50; //設置時間刻度的高度和網格的標題
gantt.config.subscales = [
{unit: "day", step: 1, date: "%j, %D"}
]; //指定第二個時間刻度
gantt.init("gantt_here");gantt.templates.task_text=function(start,end,task){
return "<b>Text:</b> "+task.text+",<b> Holders:</b> "+task.username;
};
gantt.init("gantt_here");官網提供了豐富的文檔示例。
非常棒的一款開源甘特圖庫，可以讓你預測時間、成本、數量及質量上的關聯并回溯結果。也能幫助你考慮人力、資源、日期、項目中重復的要素和關鍵部分，讓你更加直觀的看到任務進展及資源的利用率等。
# 官網地址
https://dhtmlx.com/docs/products/dhtmlxGantt/
# 倉庫地址
https://github.com/DHTMLX/gantt好了，今天就介紹到這里。大家如果有其它不錯的甘特圖庫，歡迎一起交流討論！
是一個使用簡單、動效現代酷炫js圖表庫，用來構建專業美觀的數據圖表。
Chart.js 是一個基于 canvas 的可視化開源庫。它可以用于構建簡單漂亮的 H5 圖表，滿足產品數據可視化的需求。
官網截圖
官方文檔(英文)
圖表需求在互聯網產品中極其常見，一般的圖表庫能把人給丑哭，開發一個好看的圖表功能，需要投入的精力非常多。Chart.js 就是一款優秀漂亮的圖表解決方案，不僅可以用在pc端中后臺項目上，由于其出色的響應式設計，使得用在移動端上表現尤為亮眼，而且使用簡單、API簡潔，開箱即用的特點，直到現在都是我選擇圖表庫的首選。
雖然 Chart.js 基于HTML5，不僅能用在web、小程序上，也能用混合開發的方式用在App產品中。
遺憾的是，雖然目前 Chart.js 足夠好看，但并不支持樣式定制，樣式也不偏中性，所以對視覺設計要求高的產品需求，如果風格不相近的話，使用起來會有些突兀。
Chart.js 是開放源代碼，基于MIT許可開源，我們可以免費使用在任何項目。
關注我，持續分享高質量的免費開源、免費商用的資源。
↓↓點【了解更多】查看本次分享的相關網址。
TML5是一種標記語言，用于創建和呈現網頁內容。與早期的HTML版本相比，HTML5具有許多新的功能和改進，可以更好地支持動態內容、多媒體、圖形和互動性。在本文中，我們將討論如何使用HTML5制作網頁，以及HTML5與舊版本HTML的區別。
首先，讓我們了解一下HTML5的一些主要功能和優勢。HTML5具有以下特點：
1. 語義化標簽：HTML5引入了一些新的語義化標簽，例如、、、等。這些標簽的使用可以增強網頁的結構并提高搜索引擎的可讀性。
2. 多媒體支持：HTML5內置了對多媒體的支持，例如和標簽，可以在網頁上直接播放視頻和音頻文件，而無需使用第三方插件。
3. Canvas繪圖：HTML5引入了元素，允許開發者通過JavaScript在網頁上繪制圖形和動畫。這對于創建復雜的圖表、可視化效果和游戲非常有用。
4. 本地存儲：HTML5提供了幾種本地存儲方法，例如localStorage和sessionStorage。這些方法可以在客戶端存儲數據，使得網頁可以更快地加載和響應用戶的操作。
5. 表單增強：HTML5為表單提供了許多新的輸入類型和屬性，例如日期、時間、顏色、URL等。這些功能減少了對JavaScript的依賴，在客戶端驗證和收集用戶輸入數據時更加方便。
現在，讓我們看看如何使用HTML5制作網頁的基本步驟。
步驟一：創建HTML文檔結構HTML5的網頁結構包括、和等標簽。在標簽中，可以設置網頁的語言屬性（）和字符編碼（）。在標簽中，可以添加網頁的標題（）和其他元數據（標簽）。在標簽中，可以編寫網頁的內容。
步驟二：使用語義化標簽為了增強網頁的結構和可讀性，應盡量使用語義化標簽。例如，標簽用于網頁的標題和導航欄，標簽用于網頁的導航鏈接，和標簽用于劃分網頁的內容部分。
步驟三：插入多媒體使用、和
等標簽插入多媒體內容。例如，使用標簽可以插入視頻文件，并設置其屬性（例如src、width、height）來指定視頻的來源和尺寸。
步驟四：繪制圖形和動畫使用標簽和JavaScript繪制圖形和動畫。通過在標簽中指定寬度和高度，并調用JavaScript函數繪制圖形，可以在網頁上顯示自定義的圖形和動畫效果。
步驟五：使用本地存儲使用localStorage和sessionStorage等方法，在客戶端存儲數據。通過調用JavaScript的API，可以將數據存儲在瀏覽器中，并在需要時讀取和更新數據。
步驟六：優化網頁性能使用HTML5的新功能來優化網頁性能。例如，使用新的表單輸入類型和屬性可以在客戶端驗證和收集用戶輸入數據，減少對服務器的請求和響應時間。
現在，讓我們來了解一下HTML5和HTML的區別。
HTML5是HTML的第五個版本，是對以前的HTML版本進行的改進和擴展。與HTML4相比，HTML5具有許多新的功能和語義化標簽，使開發者能夠創建更現代、豐富和交互性的網頁。
以下是HTML5和HTML的一些區別：
1. 標簽語義化：HTML5引入了許多新的語義化標簽，如、、、等。這些標簽增強了網頁的結構和可讀性，有助于搜索引擎優化和可訪問性。
2. 多媒體支持：HTML5內置了對多媒體的支持，如和標簽，可以在網頁上直接播放視頻和音頻文件。而在HTML4中，需要使用第三方插件（如Flash）來實現相同的功能。
3. Canvas繪圖：HTML5引入了元素，允許在網頁上通過JavaScript繪制圖形和動畫。而在HTML4中，圖形和動畫的創建通常依賴于第三方插件或JavaScript庫。
4. 本地存儲：HTML5提供了localStorage和sessionStorage等方法，在客戶端存儲數據。這使得網頁可以更快地加載和響應用戶的操作。相比之下，HTML4需要通過服務器來存儲和獲取數據。
5. 表單增強：HTML5為表單提供了新的輸入類型和屬性，如日期、時間、顏色、URL等。這減少了對JavaScript和服務器的依賴，提高了用戶體驗。
總結起來，HTML5相對于HTML4具有更多的功能和改進，使得開發者可以創建更現代、豐富和互動性的網頁。它提供了語義化標簽、多媒體支持、Canvas繪圖、本地存儲和表單增強等功能，為網頁開發提供了更多的選擇和可能性。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
