整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
天给大家分享一款超全功能的跨浏览器平台甘特图表库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小时内与您取得联系。
