highcharts中gantt甘特图的使用

示例图：

官方文档参考：highcharts gantt
甘特图示例
使用示例：

<template><div id="container"></div>
</template><script>
export default {mounted() {let month = "2022-12";const moment = this.$moment;const WEEKS = {0: "日",1: "一",2: "二",3: "三",4: "四",5: "五",6: "六",};const data = [{name: "1#机1",start: new Date("2022-12-01 09:00:00").getTime(),end: new Date("2022-12-11 09:00:00").getTime(),completed: 0.25,y: 0,},{name: "1#机1",start: new Date("2022-12-13 09:00:00").getTime(),end: new Date("2022-12-18 09:00:00").getTime(),y: 0,},{name: "2#机2",start: new Date("2022-12-08 09:00:00").getTime(),end: new Date("2022-12-10 19:20:40").getTime(),y: 1,},{name: "3#机3",start: new Date("2022-12-06 09:00:00").getTime(),end: new Date("2022-12-21 09:00:00").getTime(),completed: {amount: 0.12,fill: "red",},y: 2,},{name: "4#机4",start: new Date("2022-12-21 09:00:00").getTime(),end: new Date("2022-12-31 09:00:00").getTime(),y: 3,},];// 自定义主题const my_skin = {//颜色数组，默认从数组第一个元素取色// colors: [//   "#33FF33",//   "#f45b5b",//   "#7798BF",//   "#aaeeee",//   "#ff0066",//   "#eeaaee",//   "#55BF3B",//   "#DF5353",//   "#7798BF",//   "#aaeeee",// ],//背景chart: {backgroundColor: "#364766",},xAxis: {labels: {style: {color: "#f5f7fa",},},},yAxis: {title: {style: { color: "#f5f7fa" },},markable: { enabled: false }, //不显示每一个点的实心labels: {style: {color: "#f5f7fa",},},},global: {useUTC: false, // 不使用utc时间},lang: {noData: "暂无数据",},};// 全局配置，需要在图标初始化之前配置this.$highcharts.setOptions(my_skin, {global: {useUTC: false, // 不使用utc时间},lang: {noData: "暂无数据",},});let max = moment(this.queryForm.plan_date2).add(1, "days");this.$highcharts.ganttChart("container", {xAxis: [{min: moment(month).valueOf(),// max: moment(max).valueOf(), // 根据时间区间选择max: moment(month).endOf("month").valueOf(), // 根据每个月选择gridLineEidth: 1,minTickInterval: 1000 * 60 * 60 * 24,currentDateIndicator: true,tickPixelInterval: 70,grid: {borderWidth: 1, // 右侧表头边框宽度cellHeight: 35, // 右侧日期表头高度},labels: {align: "center",formatter: function () {return `周${WEEKS[moment(this.value).day()]}`;},},},{gridLineWidth: 1,minTickInterval: 1000 * 60 * 60 * 24,tickPixelInterval: 100,grid: {borderWidth: 1, // 右侧表头边框宽度cellHeight: 30, // 右侧日期表头高度},labels: {align: "center",formatter: function () {return `${moment(this.value).format("M-D")} `;},},},],yAxis: {type: "category",grid: {enabled: true,borderColor: "#e6e6e6",borderWidth: 1,columns: [{title: {text: "设备",},labels: {format: "{point.name}",},},],},},tooltip: {formatter: function () {return `<div>设备：${this.point.name}  <br />开始时间：${moment(this.point.start).format("YYYY-MM-DD HH:mm:ss")}<br />结束时间：${moment(this.point.end).format("YYYY-MM-DD HH:mm:ss")}</div>`;},},series: [{data,},],plotOptions: {series: {animation: false, // Do not animate dependency connectorsdragDrop: {draggableX: false, // 横向拖拽draggableY: false, // 纵向拖拽dragMinY: 0, // 纵向拖拽下限dragMaxY: 3, // 纵向拖拽上限dragPrecisionX: 3600000, // 横向拖拽精度，单位毫秒},dataLabels: {enabled: true,format: "{point.name}",style: {cursor: "default",pointerEvents: "none",color: "#ffffff",},},allowPointSelect: true,},},exporting: {sourceWidth: 1000,},credits: {// 去掉右下角版权信息enabled: false,},chart: {spacingLeft: 10,spacingTop: 10,},pane: {background: [{backgroundColor: "red",},],},});},
};
</script>

highcharts中gantt甘特图的使用相关推荐

Gantt(甘特图)与PERT(项目计划评审技术)图各自的缺陷
文章目录 1 Gantt(甘特图) 2 PERT(项目计划评审技术)图 3 考题 1 Gantt(甘特图) 甘特图,也称为条状图(Bar chart).是在1917年由亨利·甘特开发的,其内在思想简单 ...
PM小课堂项目管理中的甘特图妙用
PM小课堂|项目管理中的甘特图妙用项目管理与甘特图会碰撞出怎样的火花? 为什么要在项目管理中关注甘特图? 甘特图(Gantt chart)是一种通过活动列表和时间刻度表示出特定项目的顺序与持续时间 ...
Silverlight Gantt甘特图项目管理解决方案
2019独角兽企业重金招聘Python工程师标准>>> Silverlight Gantt甘特图是一款非常丰富,可定制,轻量级和高性能的控件. 项目甘特图: 可视化层次的任务列表. ...
动态修改 DHTML Gantt甘特图皮肤样式
初始化一个DHTML Gantt甘特图的皮肤默认为Teracce Skin 现在项目有一个需求通过按钮动态修改甘特图主题(皮肤),在官网提供的API不难发现修改样式办法.说到底,只是改变CSS样式文件 ...
Gantt(甘特图)与PERT(项目计划评审技术)图
在软考考试题中,甘特图和PERT图经常出现.两者无外乎就是针对考生对两者的概念理解是否准确. 甘特图也就做进度管理图.他是一种简单的水平条形图,它以日历为基准描述项目任务,水平轴表示日历时间线,每一个 ...
gantt(甘特)图
gantt图又叫甘特图. 进度是按时间顺序计划活动的一个列表,我们称之为Gantt图,它有以下几个关键的成分: 1.横跨图顶部排列的是日历表. 2.最左边的一列包含了每项任务的标识号(ID). 3.左 ...
在vue中展示甘特图
甘特图一.子组件模板二.需要引入的组件三.需要在mounted定义相关格式 ①设置日期格式 ②显示操作按钮 ③日期列显示 ④显示的列配置 ⑤左右容器分别有滚动条 ⑥task 内容文本 ⑦task ...
Gantt(甘特图)与PERT(项目计划评审技术)图，项目关键路径和松弛时间
甘特图也叫做进度管理图. 他是一种简单的水平条形图,它以日历为基准描述项目任务,水平轴表示日历时间线,每一个线条表示一个任务,任务名称垂直的列在左边列中,图中的线条的起点和终点对应水平轴上的时间,分别 ...
在excel中绘制甘特图
问题:在开发中一般在需求开始前需要有一个计划,但是领导肯定不想看你密密麻麻的文字,他更关心的是什么时间点能完成到什么程度,最后什么时间能完成,那这时候甘特图就非常有用了.既能体现自己的技术水平,又能 ...

highcharts中gantt甘特图的使用

highcharts中gantt甘特图的使用相关推荐

最新文章

热门文章