Highcharts甘特图基本用法(highcharts-gantt.js)

news2024/11/23 18:34:01

参考官方文档:

https://www.highcharts.com/docs/gantt/getting-started-gantt

https://www.highcharts.com/demo/gantt/project-management

 https://www.hcharts.cn/demo/gantt

链接在下面按需引入

https://code.highcharts.com/gantt/highcharts-gantt.js

https://code.highcharts.com/highcharts.js

https://code.highcharts.com/gantt/modules/gantt.js

JS初始化举例:

const day = 24 * 36e5,
        today = Math.floor(Date.now() / day) * day;

    const options = {
        chart: {
            plotBackgroundColor: 'rgba(128,128,128,0.02)',
            plotBorderColor: 'rgba(128,128,128,0.1)',
            plotBorderWidth: 1
        },

        plotOptions: {
            series: {
                borderRadius: '50%',
                connectors: {
                    dashStyle: 'ShortDot',
                    lineWidth: 2,
                    radius: 5,
                    startMarker: {
                        enabled: false
                    }
                },
                groupPadding: 0,
                dataLabels: [{
                    enabled: true,
                    align: 'left',
                    format: '{point.name}',
                    padding: 10,
                    style: {
                        fontWeight: 'normal',
                        textOutline: 'none'
                    }
                }, {
                    enabled: true,
                    align: 'right',
                    format: '{#if point.completed}{(multiply ' +
                        'point.completed.amount 100):.0f}%{/if}',
                    padding: 10,
                    style: {
                        fontWeight: 'normal',
                        textOutline: 'none',
                        opacity: 0.6
                    }
                }]
            }
        },

        series: [{
            name: 'Offices',
            data: [{
                name: 'New offices',
                id: 'new_offices',
                owner: 'Peter'
            }, {
                name: 'Prepare office building',
                id: 'prepare_building',
                parent: 'new_offices',
                start: today - (2 * day),
                end: today + (6 * day),
                completed: {
                    amount: 0.2
                },
                owner: 'Linda'
            }, {
                name: 'Inspect building',
                id: 'inspect_building',
                dependency: 'prepare_building',
                parent: 'new_offices',
                start: today + 6 * day,
                end: today + 8 * day,
                owner: 'Ivy'
            }, {
                name: 'Passed inspection',
                id: 'passed_inspection',
                dependency: 'inspect_building',
                parent: 'new_offices',
                start: today + 9.5 * day,
                milestone: true,
                owner: 'Peter'
            }, {
                name: 'Relocate',
                id: 'relocate',
                dependency: 'passed_inspection',
                parent: 'new_offices',
                owner: 'Josh'
            }, {
                name: 'Relocate staff',
                id: 'relocate_staff',
                parent: 'relocate',
                start: today + 10 * day,
                end: today + 11 * day,
                owner: 'Mark'
            }, {
                name: 'Relocate test facility',
                dependency: 'relocate_staff',
                parent: 'relocate',
                start: today + 11 * day,
                end: today + 13 * day,
                owner: 'Anne'
            }, {
                name: 'Relocate cantina',
                dependency: 'relocate_staff',
                parent: 'relocate',
                start: today + 11 * day,
                end: today + 14 * day
            }]
        }, {
            name: 'Product',
            data: [{
                name: 'New product launch',
                id: 'new_product',
                owner: 'Peter'
            }, {
                name: 'Development',
                id: 'development',
                parent: 'new_product',
                start: today - day,
                end: today + (11 * day),
                completed: {
                    amount: 0.6,
                    fill: '#e80'
                },
                owner: 'Susan'
            }, {
                name: 'Beta',
                id: 'beta',
                dependency: 'development',
                parent: 'new_product',
                start: today + 12.5 * day,
                milestone: true,
                owner: 'Peter'
            }, {
                name: 'Final development',
                id: 'finalize',
                dependency: 'beta',
                parent: 'new_product',
                start: today + 13 * day,
                end: today + 17 * day
            }, {
                name: 'Launch',
                dependency: 'finalize',
                parent: 'new_product',
                start: today + 17.5 * day,
                milestone: true,
                owner: 'Peter'
            }]
        }],
        tooltip: {
            pointFormat: '<span style="font-weight: bold">{point.name}</span><br>' +
                '{point.start:%e %b}' +
                '{#unless point.milestone} → {point.end:%e %b}{/unless}' +
                '<br>' +
                '{#if point.completed}' +
                'Completed: {multiply point.completed.amount 100}%<br>' +
                '{/if}' +
                'Owner: {#if point.owner}{point.owner}{else}unassigned{/if}'
        },
        title: {
            text: 'Gantt Project Management'
        },
        xAxis: [{
            currentDateIndicator: {
                color: '#2caffe',
                dashStyle: 'ShortDot',
                width: 2,
                label: {
                    format: ''
                }
            },
            dateTimeLabelFormats: {
                day: '%e<br><span style="opacity: 0.5; font-size: 0.7em">%a</span>'
            },
            grid: {
                borderWidth: 0
            },
            gridLineWidth: 1,
            min: today - 3 * day,
            max: today + 18 * day,
            custom: {
                today,
                weekendPlotBands: true
            }
        }],
        yAxis: {
            grid: {
                borderWidth: 0
            },
            gridLineWidth: 0,
            labels: {
                symbol: {
                    width: 8,
                    height: 6,
                    x: -4,
                    y: -2
                }
            },
            staticScale: 30
        },
        accessibility: {
            keyboardNavigation: {
                seriesNavigation: {
                    mode: 'serialize'
                }
            },
            point: {
                descriptionFormatter: function (point) {
                    const completedValue = point.completed ?
                        point.completed.amount || point.completed : null,
                        completed = completedValue ?
                            ' Task ' + Math.round(completedValue * 1000) / 10 +
                            '% completed.' :
                            '',
                        dependency = point.dependency &&
                            point.series.chart.get(point.dependency).name,
                        dependsOn = dependency ?
                            ' Depends on ' + dependency + '.' : '';

                    return Highcharts.format(
                        point.milestone ?
                            '{point.yCategory}. Milestone at {point.x:%Y-%m-%d}. ' +
                            'Owner: {point.owner}.{dependsOn}' :
                            '{point.yCategory}.{completed} Start ' +
                            '{point.x:%Y-%m-%d}, end {point.x2:%Y-%m-%d}. Owner: ' +
                            '{point.owner}.{dependsOn}',
                        { point, completed, dependsOn }
                    );
                }
            }
        },
        lang: {
            accessibility: {
                axis: {
                    xAxisDescriptionPlural: 'The chart has a two-part X axis ' +
                        'showing time in both week numbers and days.'
                }
            }
        }
    };

    // Plug-in to render plot bands for the weekends
    Highcharts.addEvent(Highcharts.Axis, 'foundExtremes', e => {
        if (e.target.options.custom && e.target.options.custom.weekendPlotBands) {
            const axis = e.target,
                chart = axis.chart,
                day = 24 * 36e5,
                isWeekend = t => /[06]/.test(chart.time.dateFormat('%w', t)),
                plotBands = [];

            let inWeekend = false;

            for (
                let x = Math.floor(axis.min / day) * day;
                x <= Math.ceil(axis.max / day) * day;
                x += day
            ) {
                const last = plotBands.at(-1);
                if (isWeekend(x) && !inWeekend) {
                    plotBands.push({
                        from: x,
                        color: {
                            pattern: {
                                path: 'M 0 10 L 10 0 M -1 1 L 1 -1 M 9 11 L 11 9',
                                width: 10,
                                height: 10,
                                color: 'rgba(128,128,128,0.15)'
                            }
                        }
                    });
                    inWeekend = true;
                }

                if (!isWeekend(x) && inWeekend && last) {
                    last.to = x;
                    inWeekend = false;
                }
            }
            axis.options.plotBands = plotBands;
        }
    });
    Highcharts.ganttChart('container', options);//container这里是div的id

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2151652.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【C语言】自定义类型——联合和枚举

目录 一、联合体&#xff08;共用体&#xff09; &#xff08;1&#xff09;联合体类型的声明 &#xff08;2&#xff09;联合体类型的特点 &#xff08;3&#xff09;联合体和结构体的比较 &#xff08;4&#xff09;联合体大小的计算 &#xff08;5&#xff09;联合体的…

STM8L101低功耗的理解

一.通过降低时钟频率来降低功耗&#xff1a; 规格书如图 1.code 从flash启动&#xff0c;主频率是16Mhz时&#xff0c;功耗测量2.51ma左右&#xff0c;对应程序如下&#xff1a; 2.code从flash启动&#xff0c;主频率是2Mhz时&#xff08;上电默认值&#xff09;&#xff0c;功…

Android 如何使用jdk命令给应用/APK重新签名。

写在前面&#xff1a;本篇文章介绍Windows命令行中&#xff0c;如何使用jdk命令给已经签过名的apk重新签名。 使用工具&#xff1a;jarsigner。jarsigner是jdk自带的工具&#xff0c;签名之前确保Windows电脑中已安装jdk。我的环境如下&#xff1a;   后续操作步骤如下&…

力扣(leetcode)每日一题 2332 坐上公交的最晚时间

题目&#xff1a; 给你一个下标从 0 开始长度为 n 的整数数组 buses &#xff0c;其中 buses[i] 表示第 i 辆公交车的出发时间。同时给你一个下标从 0 开始长度为 m 的整数数组 passengers &#xff0c;其中 passengers[j] 表示第 j 位乘客的到达时间。所有公交车出发的时间互…

(七)使用SoapUI工具调用WebAPI

1.调用一个无参数的GET请求 [HttpGet(Name "GetWeatherForecast")]public IEnumerable<WeatherForecast> Get(){return Enumerable.Range(1, 5).Select(index > new WeatherForecast{Date DateTime.Now.AddDays(index),TemperatureC Random.Shared.Next(…

QFramework v1.0 使用指南 更新篇:20240918. 新增 BindableList

20240918. 新增 BindableList BindableProperty 很好用&#xff0c;但是不支持 List 等集合。 而 Bindable List 功能群友呼吁了很久了。 应群友要求&#xff0c;笔者实现了 Bindable List。 基本使用方式如下: using System; using UnityEngine; using UnityEngine.UI;na…

最新版本TensorFlow训练模型TinyML部署到ESP32入门实操

最新版本TensorFlow训练模型TinyML入门实操 1.概述 这篇文章介绍微型嵌入式设备的机器学习TinyML&#xff0c;它们的特点就是将训练好的模型部署到单片机上运行。 2.TensorFlow深度学习原理 TensorFlow开源项目是由google研发的一个嵌入式机器学习工具&#xff0c;通过调用…

智慧安防监控EasyCVR视频汇聚管理平台如何修改视频流分辨率?

智慧安防监控EasyCVR视频管理平台能在复杂的网络环境中&#xff0c;将前端监控设备进行统一集中接入与汇聚管理。EasyCVR平台支持H.264/H.265视频压缩技术&#xff0c;可在4G/5G/WIFI/宽带等网络环境下&#xff0c;传输720P/1080P/2K/4K高清视频。视频流经平台处理后&#xff0…

高质量的翻译:应用程序可用性和成功的关键

在日益全球化的应用市场中&#xff0c;开发一款优秀的产品只是成功的一半。另一半&#xff1f;确保你的用户&#xff0c;无论他们在哪里或说什么语言&#xff0c;都能无缝理解和使用它。这就是高质量翻译的用武之地——不是事后的想法&#xff0c;而是应用程序可用性和最终成功…

如何写一个自动化Linux脚本去进行等保测试--引言

#我的师兄喜欢给我的休闲实习生活加活&#xff0c;说是让我在实习期间写一个自动化脚本去进行等保测试。呵呵哒。 怎么办呢&#xff0c;师兄的指令得完成&#xff0c;师兄说让我使用Python完成任务。 设想如下&#xff1a; 1、将Linux指令嵌入到python脚本中 2、调试跑通 …

C++11——function与bind

包装器 function包装器function的介绍function的使用function的使用场景function的意义 bind包装器bind的介绍bind的使用 function包装器 function的介绍 function是用来包装函数的&#xff0c;所以叫做包装器或者适配器&#xff0c;fuction的本质其实是一个类模板。 functio…

Mac使用gradle编译springboot-2.7.x源码

1 开发环境&#xff1a; JDK8 ideaIU-2024.2.2 gradle-7.6.3 代理网络 2 下载springboot源码 代码仓库网址 git clone -b 2.7.x https://github.com/spring-projects/spring-boot.git3 安装gradle gradle下载网址 https://services.gradle.org/distributions/ 安装此文件指…

Three.js 3D人物漫游项目(上)

本文目录 前言1、项目构建1.1 安装依赖1.2 初始化1.3 项目结构1.4 初始化的项目运行 2、加载模型2.1 threejs三要素2.1.1 代码解读 2.2 加载模型2.2.1 代码解读 2.3 效果 前言 在数字技术的浪潮中&#xff0c;三维图形渲染技术以其独特的魅力&#xff0c;正逐步渗透到我们生活的…

基于无人机影像的可见光单木分割数据集-json格式

基于无人机影像的可见光单木分割数据集&#xff0c;共1700张影像&#xff0c;数据集大小3.6GB&#xff0c;分割标注采用标准json格式。 该数据集是一个专门用于基于无人机可见光影像进行单木分割的数据集&#xff0c;旨在帮助研究人员和开发者训练和评估基于深度学习的图像分割…

4.5 pandas 实战 分析抖音播放数据(1)

课程目标 基于pandas对抖音播放数据做数据分析 数据准备 点此去下载 课程内容 导包 import pandas as pd import numpy as np import matplotlib.pyplot as plt import seaborn as sns plt.rcParams["font.family"] "SimHei" plt.rcParams["ax…

道路坑洞分割数据集/道路裂纹分割数据集

1.道路坑洞,道路裂纹分割数据集&#xff0c;包含5790张坑洞分割图像数据&#xff08;默认分割标注png图片&#xff0c;850MB&#xff09;2.10000余张道路裂纹图像数据&#xff08;默认分割标注png图片&#xff0c;3.7GB&#xff09;3。道路坑洞&#xff0c;道路 道路坑洞与裂纹…

关于“华为杯”第二十一届中国研究生数学建模竞赛赛题下载及提交作品的重要提醒

↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ 各参赛队伍&#xff1a; “华为杯”第二十一届中国研究生数学建模竞赛即将于2024年…

零基础玩转实在Agent -- 基础篇|实在Agent研究

前言 实在Agent是什么 实在Agent&#xff08;智能体&#xff09;是实在智能基于RPA和自研屏幕语义理解技术&#xff0c;结合最前沿的Al大模型打造的自动化智能体产品。 它能像朋友一样聊天&#xff0c;并通过对话的方式理解你的任务需求&#xff0c;自动规划任务的实现方式&…

Qt clicked()、clicked(bool)、toggled(bool)信号的区别和联系

clicked() 信号 所属控件&#xff1a;clicked()信号是QAbstractButton类&#xff08;及其子类&#xff0c;如QPushButton、QRadioButton、QCheckBox等&#xff09;的一个信号。clicked信号可以说是许多控件&#xff08;特别是按钮类控件&#xff0c;如QPushButton&#xff09;…

后台数据管理系统 - 项目架构设计-Vue3+axios+Element-plus(0920)

十三、文章分类页面 - [element-plus 表格] Git仓库&#xff1a;https://gitee.com/msyycn/vue3-hei-ma.git 基本架子 - PageContainer 功能需求说明&#xff1a; 基本架子-PageContainer封装文章分类渲染 & loading处理文章分类添加编辑[element-plus弹层]文章分类删除…