前端组件 – 甘特图

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

文章目录

前端组件 -- 甘特图
前言
一、Highcharts？
二、使用
- 1.简单示例（三分钟上手）
- 2.甘特图的绘制
- 3.对比甘特图的绘制
总结

前言

使用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,}],}]});

总结

为了一个项目学习了下Highcharts如何画图吧。

使用Highcharts来画一个简易的甘特图相关推荐

用canvas画一个太极图（八卦图）
用canvas画一个太极图(八卦图) 源码展示链接: https://yanhappiness.github.io/Notes/canvas_src.html 理解什么是canvas canvas是H ...
如何画一个简单的波特图（渐近线近似零极点特性）？
如何画一个简单的波特图(渐近线近似&零极点特性)? 在工程上我们常见下图所示的波特图来描述一个系统开环函数的频率特性,通过零点和极点画出波特图我们可以得到系统是否稳定的结论. 首先讲一下人们为 ...
Turtle系列之画一个简易的交通标志，安排安排【留作业】
导语哈喽!我是木木子!中秋过完大家想我了没? 之前给大家说过的嘛--最近练车断断续续更新,今天告诉大家一个好消息驾照拿到手了! 哈哈哈哈 !对我来说是蛮高兴的事情滴,这就要说起交通标志了: 这大家熟 ...
用canvas画一个简易的机器猫头像
用canvas画一个机器猫的头像,原图如下: 代码实现效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <he ...
HTML关于机器猫的小游戏,完美起航-用HTML5+CSS3画一个简易的机器猫头像
用HTML5+CSS3画一个机器猫的头像,原图如下: 代码实现效果如下: 布局使用了绝对定位.相对定位以及浮动,鼻子使用了背景图像渐变的效果, 笑脸的嘴巴使用椭圆的下边框实现,胡须部分的细节处理得还是 ...
利用gantt-elastic 实现简易项目甘特图
文章目录前言一.Gannt-elastic是什么? 二.使用步骤 1.安装依赖 2.代码中使用总结前言年初回来公司计划做一个目标管理系统(类似禅道)用于后期项目.人员各自工作计划管理,其中有 ...
项目管理必备 | 10分钟学会用markdown高效画出超简洁的甘特图
目录 0. 甘特图长啥样 1.甘特图介绍 2.mermaid介绍 2.1 选择markdown编辑器 2.2 运用mermaid画甘特图示例饼状统计图类图顺序图 0. 甘特图长啥样 Mon 0 ...
在vue中element ui 结合frappe-gantt实现一个简单的甘特图功能
在vue中创建甘特图步骤请参考: https://editor.csdn.net/md/?articleId=130145782 2. 结合element ui 实现甘特图功能实现效果: 2.1 下 ...
MATLAB，画一个全白的图
只用生成一个全白的图就OK 在这里插入代码片 clear all; cm = 0.01; um = 1e-6; nm = 1e-9; mm = 1e-3; lambda = 638.8*nm;Pitc ...

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