使用Highcharts来画一个简易的甘特图

最新推荐文章于 2024-03-18 10:44:58 发布

Charles_陈

最新推荐文章于 2024-03-18 10:44:58 发布

阅读量4.4k

点赞数 1

分类专栏：前端文章标签： javascript css 前端前端框架

本文链接：https://blog.csdn.net/qq_42263115/article/details/119409389

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前端组件 – 甘特图

由于在项目中需要画一个基于时间的对比甘特图，但缺乏前端知识，便在网上寻找相关插件或者已有代码。

文章目录

前端组件 -- 甘特图
前言
一、Highcharts？
二、使用
总结

前言

使用Highcharts绘制一个简易的对比甘特图。

一、Highcharts？

Highcharts 是一个用纯 JavaScript 编写的一个图表库，能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。

支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表，其中很多图表可以集成在同一个图形中形成混合图。

经过多年的开发和维护拥有着丰富的图表功能和稳定的性能以及专业详细的开发文档上手极其容易，展现出来也是极其的美观简约大气，相比与echarts有完整的实例演示，功能介绍和详细的api文档（虽然echarts也有的）。
Highchart官网：https://api.highcharts.com.cn

二、使用

Highcharts使用极其简单，相比于百度的echarts的话，在甘特图上的处理原理上会更好懂一些。
ps:虽然可能大差不差:(

1.简单示例（三分钟上手）

代码如下（示例）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>三分钟上手Highcharts 图表</title>
    <script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
	<script src="js/exporting.js"></script>
	<script src="js/xrange.js"></script>
</head>
<body>
    <!-- 图表容器 DOM -->
    <div id="container" style="width: 600px;height:400px;"></div>
    <!-- 引入 highcharts.js -->
    <script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
    <script>
        // 图表配置
        var options = {
            chart: {
                type: 'bar'                          //指定图表的类型，默认是折线图（line）
            },
            title: {
                text: '三分钟上手Highcharts 图表'                 // 标题
            },
            xAxis: {
                categories: ['薄荷糖', '牛奶糖', '巧克力豆']   // x 轴分类
            },
            yAxis: {
                title: {
                    text: '吃糖个数'                // y 轴标题
                }
            },
            series: [{ 
                
                // 数据列
                name: '王小婷',                        // 数据列名
                data: [1, 0, 7],                     // 数据
            }, {
                name: '安安',
                data: [2, 4, 3]
            }]
        };
        // 图表初始化函数
        var chart = Highcharts.chart('container', options);
    </script>
</body>
</html>

2.甘特图的绘制

代码如下（示例）：

Highcharts.chart('container', {
	chart: {
		type: 'xrange'
	},
	title: {
		text: '简易甘特图'
	},
	xAxis: {
		type: 'datetime',
		dateTimeLabelFormats: {
			week: '%Y/%m/%d'
		}
	},
	yAxis: {
		title: {
			text: ''
		},
		categories: ['制作产品原型', '开发', '测试'],
		reversed: true
	},
	tooltip: {
		dateTimeLabelFormats: {
			day: '%Y/%m/%d'
		}
	},
	series: [{
		name: '项目1',
		// pointPadding: 0,
		// groupPadding: 0,
		borderColor: 'gray',
		pointWidth: 20,
		data: [{
			x: Date.UTC(2014, 10, 21),
			x2: Date.UTC(2014, 11, 2),
			y: 0,
			partialFill: 0.25
		}, {
			x: Date.UTC(2014, 11, 2),
			x2: Date.UTC(2014, 11, 5),
			y: 1
		}, {
			x: Date.UTC(2014, 11, 8),
			x2: Date.UTC(2014, 11, 9),
			y: 2
		}, {
			x: Date.UTC(2014, 11, 9),
			x2: Date.UTC(2014, 11, 19),
			y: 1
		}, {
			x: Date.UTC(2014, 11, 10),
			x2: Date.UTC(2014, 11, 23),
			y: 2
		}],
		dataLabels: {
			enabled: true
		}
	}]
});

在这里插入图片描述
但在绘制的图形中含有水印
去除水印与右上角功能条框：。

    credits: {
              enabled:false
    },
    exporting: {
                enabled:false
    },

3.对比甘特图的绘制

由于默认的样式，与业务需求不符，我们要的是在同一个类别中颜色有差异，但在不同类别中老师的颜色是一样的，为了简易起见，使用了一个小细节，将边框的px设置的很大，而填充的px设置的很小，这样就得到了需求想要的样式。

//甘特图
    Highcharts.chart('container1', {
      chart: {
        type: 'xrange'
      },
      title: {
        text: ''
      },
      xAxis: {
        type: 'linear',
        dateTimeLabelFormats: {

          // week: '%M%S'
        }
      },
      credits: {
        enabled: false
      },
      yAxis: {
        title: {
          text: ''
        },
        categories: ['教师讲授', '教学组织', '教师巡视', '互动交流', '独立学习', '小组合作', '随堂练习', '学生应答'],
        reversed: true
      },
      tooltip: {
        dateTimeLabelFormats: {
          // day: '%M%S'
        }
      },
      series: [{
        name: "张老师",
        pointPadding: 5,
        groupPadding: 0,
        borderColor: '#5470c6',
        borderWidth: 9,
        pointWidth: 1,
        data: [{
          x: 0,
          x2: 10,
          y: 0,
        },
        {
          x: 10,
          x2: 20,
          y: 1,
        },
        {
          x: 20,
          x2: 30,
          y: 2,
        },
        {
          x: 30,
          x2: 50,
          y: 3,
        },
        {
          x: 40,
          x2: 50,
          y: 4,
        }, {
          x: 10,
          x2: 50,
          y: 5,
        }],
      },
      {
        // pointPadding: 0,
        // groupPadding: 0,
        name: "李老师",
        borderColor: '#91cc75',
        borderWidth: 9,
        pointWidth: 1,
        data: [{
          x: 5,
          x2: 15,
          y: 0,
        },
        {
          x: 8,
          x2: 20,
          y: 1,
        },
        {
          x: 20,
          x2: 27,
          y: 2,
        },
        {
          x: 30,
          x2: 50,
          y: 3,
        },
        {
          x: 40,
          x2: 50,
          y: 4,
        }, {
          x: 10,
          x2: 50,
          y: 5,
        }],
      }
      ]
    });