Highcharts 实现甘特图

最新推荐文章于 2024-08-15 11:02:12 发布

置顶 King小妖

最新推荐文章于 2024-08-15 11:02:12 发布

阅读量3.8k

点赞数 2

分类专栏： 1 前端 highCharts 文章标签： highCharts

本文链接：https://blog.csdn.net/qq_43412992/article/details/100743952

版权

前端同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

highCharts

1 篇文章 0 订阅

订阅专栏

前言
Highcharts 是一个用纯JavaScript编写的一个图表库，能够很简单便捷的在web网站或是web应用程序添加有交互性的图表。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。

一准备工作
引入需要的插件了创建一个div容器

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">	<meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <link rel="icon" href="https://static.jianshukeji.com/hcode/images/favicon.ico">
        <style>
        </style>
        <script src="https://code.highcharts.com.cn/gantt/highcharts-gantt.js"></script>
        <script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
    </head>
    <body>
        <div id="container"></div>
        <script>
        </script>
    </body>
</html>

创建数据

var today = new Date(),
	day = 1000 * 60 * 60 * 24,
	// Utility functions
	dateFormat = Highcharts.dateFormat,
	defined = Highcharts.defined,
	isObject = Highcharts.isObject,
	reduce = Highcharts.reduce;
// Set to 00:00:00:000 today
today.setUTCHours(0);
today.setUTCMinutes(0);
today.setUTCSeconds(0);
today.setUTCMilliseconds(0);
today = today.getTime();
Highcharts.ganttChart('container', {
	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',//依附的数据id
			parent: 'new_product',
			start: today + 17.5 * day,//开始时间
			milestone: true,
			owner: 'Peter'//归属的数据id
		}]
	}],
	tooltip: {
		pointFormatter: function () {
			var point = this,
				format = '%e. %b',
				options = point.options,
				completed = options.completed,
				amount = isObject(completed) ? completed.amount : completed,
				status = ((amount || 0) * 100) + '%', //准备进度
				lines;
			lines = [{
				value: point.name,
				style: 'font-weight: bold;'
			}, {
				title: 'Start',
				value: dateFormat(format, point.start)
			}, {
				visible: !options.milestone,
				title: 'End',
				value: dateFormat(format, point.end)
			}, {
				title: 'Completed',
				value: status
			}, {
				title: 'Owner',
				value: options.owner || 'unassigned'
			}];
			return reduce(lines, function (str, line) {
				var s = '',
					style = (
						defined(line.style) ? line.style : 'font-size: 0.8em;'
					);
				if (line.visible !== false) {
					s = (
						'<span style="' + style + '">' +
						(defined(line.title) ? line.title + ': ' : '') +
						(defined(line.value) ? line.value : '') +
						'</span><br/>'
					);
				}
				return str + s;
			}, '');
		}
	},
	title: {
		text: 'Gantt Project Management'
	},
	xAxis: {
		currentDateIndicator: true,
		min: today - 3 * day, //最小时间刻度
		max: today + 18 * day //最大时间刻度
	}
});

三注解

	completed: {
				amount: 0.6,//完成数
				fill: '#e80'
			},//完成对象
	dependency: 'finalize',//依附的数据id
	parent: 'new_product',
	start: today + 17.5 * day,//开始时间
	milestone: true,
	owner: 'Peter'//归属的数据id
	status = ((amount || 0) * 100) + '%', //准备进度
	min: today - 3 * day, //最小时间刻度
	max: today + 18 * day //最大时间刻度
	。。。

结果：
在这里插入图片描述