提供3000多款全球软件/控件产品
针对软件研发的各个阶段提供专业培训与技术咨询
根据客户需求提供定制化的软件开发服务
全球知名设计软件,显著提升设计质量
打造以经营为中心,实现生产过程透明化管理
帮助企业合理产能分配,提高资源利用率
快速打造数字化生产线,实现全流程追溯
生产过程精准追溯,满足企业合规要求
以六西格玛为理论基础,实现产品质量全数字化管理
通过大屏电子看板,实现车间透明化管理
对设备进行全生命周期管理,提高设备综合利用率
实现设备数据的实时采集与监控
利用数字化技术提升油气勘探的效率和成功率
钻井计划优化、实时监控和风险评估
提供业务洞察与决策支持实现数据驱动决策
翻译|使用教程|编辑:莫成敏|2020-05-09 11:38:47.973|阅读 3334 次
概述:现在,我们将向您展示将js甘特图与Vue.js(渐进式JavaScript框架)结合使用的最简单方法。
# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>
相关链接:
dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的JavaScript / HTML5甘特图,允许你创建动态甘特图,并以一个方便的图形化方式可视化项目进度。有了dhtmlxGantt,你可以显示活动之间的依赖关系,显示具有完成百分比阴影的当前任务状态以及组织活动到树结构。
我们的甘特图库(除快速的性能和丰富的功能之外)非常令人赞叹的是,它允许与几乎所有新的流行框架和技术集成。现在,我们将向您展示将js甘特图与Vue.js(渐进式JavaScript框架)结合使用的最简单方法。
因此,请按照以下说明创建Vue.js甘特图,或立即跳转到GitHub上的。
我们如何开始
我们需要做的第一件事是获取应用程序框架。为此,我们将使用vue-cli。
首先,请确保您拥有Node.js和Vue.js的最新稳定版本。您可以在node -v命令的帮助下检查您的Node.js版本,或在网站上下载最新版本。
您可以使用命令(npm install -g @ vue / cli)或使用yarn与节点软件包管理器一起安装vue-cli:
yarn global upgrade --latest @vue/cli yarn global add @vue/cli
要创建应用,请运行以下命令:
vue create gantt-vue
它将要求一些项目信息。 您可以保留默认答案,然后按每个问题的输入按钮或手动选择功能。
然后,您需要转到应用程序目录,安装依赖项并运行它。
cd gantt-vue
如果使用yarn,则需要调用以下命令:
yarn install yarn serve
如果使用npm,则需要调用以下命令:
npm install npm run dev
这些步骤之后,该应用程序应在http:// localhost:8080上运行
移至甘特图部分
现在我们应该获得dhtmlxGantt代码。 首先,我们需要通过在命令行中按ctrl + c来停止应用程序,以便随后运行以下命令:
yarn add dhtmlx-gantt --save (for yarn) npm install dhtmlx-gantt --save (for npm)然后,要将甘特图添加到应用程序中,我们应该创建一个组件。
因此,我们将从为应用程序组件创建文件夹开始。 打开src文件夹并在其中创建组件文件夹。 然后,在components文件夹中创建Gantt.vue文件,并将以下代码放入其中:
{{ src/components/Gantt.vue }} <template> <div ref="gantt"></div> </template> <script> import {gantt} from 'dhtmlx-gantt'; export default { name: 'gantt', props: { tasks: { type: Object, default () { return {data: [], links: []} } } }, mounted: function () { gantt.config.xml_date = "%Y-%m-%d"; gantt.init(this.$refs.gantt); gantt.parse(this.$props.tasks); } } </script> <style> @import "~dhtmlx-gantt/codebase/dhtmlxgantt.css"; </style>
现在,甘特图组件已准备就绪。 将元素添加到页面后,它将在“ gantt”参考下初始化甘特图。 然后,甘特图将从任务属性中加载数据。
现在是时候将组件添加到我们的应用程序了。
打开App.vue并添加以下代码,而不是我们已经在其中添加的代码。
{{ src/App.vue }} <template> <div class="container"> <gantt class="left-container" :tasks="tasks"></gantt> </div> </template> <script> import Gantt from './components/Gantt.vue'; export default { name: 'app', components: {Gantt}, data () { return { tasks: { data: [ {id: 1, text: 'Task #1', start_date: '2020-01-17', duration: 3, progress: 0.6}, {id: 2, text: 'Task #2', start_date: '2020-01-20', duration: 3, progress: 0.4} ], links: [ {id: 1, source: 1, target: 2, type: '0'} ] }, } } } </script> <style> html, body { height: 100%; margin: 0; padding: 0; } .container { height: 100%; width: 100%; } .left-container { overflow: hidden; position: relative; height: 100%; } </style>
现在,我们应该在页面上看到带有预定义任务的甘特图。
本文内容尚未完结,敬请期待后续内容~您可以下载dhtmlxGantt试用版免费体验~
本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@cahobeh.cn
文章转载自:本文探讨 SQL Server 中 NULL 和空值之间的区别,并讨论如何有效地处理它们。
Unity 是一款功能极其丰富的游戏引擎,允许开发人员将各种媒体集成到他们的项目中。但是,它缺少最令人兴奋的功能之一 - 将 Web 内容(例如 HTML、CSS 和 JavaScript)直接渲染到 3D 场景中的纹理上的能力。在本文中,我们将介绍如何使用 DotNetBrowser 在 Unity3D 中将 Web 内容渲染为纹理。
DevExpress v24.2帮助文档正式发布上线了,请按版本按需下载~
本教程将向您展示如何用MyEclipse构建一个Web项目,欢迎下载最新版IDE体验!
服务电话
重庆/ 023-68661681
华东/ 13452821722
华南/ 18100878085
华北/ 17347785263
客户支持
技术支持咨询服务
服务热线:400-700-1020
邮箱:sales@cahobeh.cn
关注我们
地址 : 重庆市九龙坡区火炬大道69号6幢