前言
Excel功能強大，應用廣泛。隨著web應用的興起和完善，使用者的要求也越來越高。很多Excel的功能都搬到了sass裡面。恨不得給他們做個Excel出來。。。程式設計師太難了。。。
去年我遇到了一個甘特圖的需求，做了很多工作，也寫了兩篇部落格。一篇是用 GSTC 這個包做的甘特圖，另一篇是自己手寫了一個簡易的甘特圖。兩個的效果都不理想，特別是GSTC，問題很多，好多道友看了部落格遇到了問題，慚愧，沒能幫大家解決這個問題。之前太忙了，這個甘特圖就再沒搞，直到今天發現了新的包，幾乎是完全符合我們的需求。
首先，我們用的是 highcharts；其次，大團隊的產品，後期維護有保障，文件也齊全。
我用 Vue3 寫的，但是highcharts不區分他，是js包，所以無論 vue react 還是原生多頁面都沒問題。
接下來先看一下我們的需求，也是最基本的，需要實現的功能，然後會有效果圖的gif，最後就是原始碼，我放在了Git上，覺得好用，麻煩給個star。
需求
1、橫軸左側是表格資料，可以展示基本資訊
2、橫軸右側是時間軸，可以切換不同精度的時間展示
3、橫向資料塊有多個，最好可以疊加
4、資料塊可以拖拽、點選等，修改任務的時間和其他資訊
效果圖
這個highcharts，不僅實現了左邊表格，右邊圖示，而且資料是聯動的；右邊橫軸是時間軸，可以自定義格式；資料允許疊加，不衝突；資料有點選等各種事件，可以選中編輯單個資料塊；資料可以拖拽，比如上下換列拖拽、水平拖拽，還可以單邊拖拽，而且事件都有回撥函式。這些功能基本可以滿足我們的需求。比如對時間段、時間長度、資料資訊的修改和展示。
原始碼地址、程式碼解析
先貼一下程式碼的Git地址，點選 GitHub原始碼 下載原始碼。建議直接下原始碼，跑專案，另外，這個專案是vue3的，不過對於這種包，寫法差別不大，主要是引數。
我貼一下程式碼，對功能實現做一個講解，當然註釋寫的也是很詳細的。
首先，highcharts-gantt.js 是專門用來實現甘特圖的檔案，draggable-points.js 是實現點事件繫結的檔案。因為vue直接引入有找不到變數的報錯，我將draggable-points的兩個module直接新增到了highcharts-gantt裡面，然後重新壓縮，沒有混淆，所以最終的包只有160K+，小了很多，大家可以直接用。壓縮之後的原始碼放心使用就行，我只是合併了2個檔案的功能函式，但是也要格外提醒，不是官方的原始檔了，感興趣的同學可以去看官方原始碼， .src 的檔案是未壓縮混淆的，註釋也很詳細。這是我合併檔案時的版本 Highcharts Gantt JS v9.3.1 (2021-11-05)，這個也是當前的穩定版本。
功能有點簡單，好像程式碼沒什麼好說的。關鍵的地方我都做了註釋，還有不明白的可以留言或者評論。
最後，還存在一個問題，我沒仔細研究原始碼，這個示例還存在一個問題，就是拖拽事件沒有中斷，而且直接修改了圖表的資料展示。比如，縱向拖動換行時，左側表格的資料會變化。暫時我還沒有找到滿意解決的方法。目前，我在拖拽結束的回撥 drop 函式中，對資料做了處理，然後將我們希望的資料回寫，更新圖表，同樣你也可以做 不能拖拽或者時間衝突等各種校驗，達到上面我所說的需求。但是還有一點瑕疵，就是拖拽過程中的資料變化，左側表格的資料拖拽過程中我也不希望他變化，暫時沒能解決掉。如果您有好的案例、好的使用、好的建議，都希望可以提出來，共同進步。
<div class="hightChart-gantt">
<div id="container"></div>
<button @click="getData">列印當前資料</button>
</div>
</template>
<script>
import { defineComponent, onMounted, ref } from 'vue';
import * as Highcharts from '@jsModule/highcharts/highcharts-gantt.src.js'
import dayjs from 'dayjs'
import{ WEEKS } from './constants'
// api文件： https://api.Highcharts.com.cn/gantt/index.html
// 社群地址： https://forum.jianshukeji.com/tags/c/Highcharts/35/Highcharts-gantt
// 官方示例： https://www.highcharts.com.cn/demo/gantt/interactive-gantt
// 待解決問題
// 1、拖拽中斷： 使用者操作應該需要校驗，但是現在對中斷使用者操作這塊還沒搞明白。
// 解決方案： 目前的做法是，在 drop 裡面做判斷，根據業務邏輯，做出提示，重新渲染資料。能實現，不夠友好。
export default defineComponent({
name: 'hightCharts-gantt',
components: {},
setup () {
const gantt = ref({});
// 官方建議用UTC的時間，鑑於業務需要，我們需要和資料庫時間保持統一，得看資料庫的儲存格式
const data = [
{start: '2021-6-1 0',end: '2021-6-1 18',factory: '華為',material: 'P50', uid: 1, y: 0, completed: 0.35},
{start: '2021-6-2 8',end: '2021-6-2 16',factory: '華為',material: 'P50', uid: 2, y: 0},
{start: '2021-6-3 8',end: '2021-6-4 24',factory: '華為',material: 'P50', uid: 3, y: 0},
{start: '2021-6-4 12',end: '2021-6-5 15',factory: '華為',material: 'P50', uid: 4, y: 0},
{start: '2021-6-1 8',end: '2021-6-1 12',factory: '小米',material: '紅米3', uid: 5, y: 1},
{start: '2021-6-3 3',end: '2021-6-3 9',factory: '小米',material: '紅米3', uid: 6, y: 1},
{start: '2021-6-1 6',end: '2021-6-1 16',factory: '蘋果',material: 'iPhone13', uid: 7, y: 2},
{start: '2021-6-2 3',end: '2021-6-2 19',factory: '蘋果',material: 'iPhone13', uid: 8, y: 2},
{start: '2021-6-3 8',end: '2021-6-3 17',factory: '蘋果',material: 'iPhone13', uid: 9, y: 2},
{start: '2021-6-1 12',end: '2021-6-1 24',factory: 'OPPO',material: 'Reno7', uid: 10, y: 3},
{start: '2021-6-2 5',end: '2021-6-2 18',factory: 'OPPO',material: 'Reno7', uid: 11, y: 3},
{start: '2021-6-3 1',end: '2021-6-5 12',factory: 'OPPO',material: 'Reno7', uid: 12, y: 3},
];
let newData = data.map(item => {
item.start = dayjs(item.start).valueOf();
item.end = dayjs(item.end).valueOf();
return item
});
// 全域性配置，需要在圖示初始化之前配置
Highcharts.setOptions({
global: {
useUTC: false // 不使用utc時間
},
// 預設都是英文的，這裡做了部分中文翻譯
lang: {
noData: '暫無資料',
weekdays: ['週一', '週二', '週三', '週四', '週五', '週六', '週日'],
months: ['一月', '兒月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
},
});
const dragStart = (e) => {
}
const drag = (e) => {
}
const drop = (e) => {
const { newPoint = {}, target = {} } = e;
if(newPoint.y || newPoint.y === 0) {
let list = [], tar = newData.find(item => item.y === newPoint.y && item.uid !== target.uid);
list = newData.map(item => {
// 當前拖拽資料
if(item.uid === target.uid) {
return {
...item,
factory: tar.factory,
material: tar.material,
...newPoint
}
} else {
return item
}
})
gantt.value.update({
series: [{
data: list
}]
})
}
}
// 選中，可以彈窗，編輯一些業務資料
const handleSelect = (e) => {
console.log('選中')
}
// 獲取最終資料
const getData = () => {
let data = gantt.value.series[0].data.map(item => {
return {
uid: item.uid,
factory: item.factory,
material: item.material,
start: item.start,
end: item.end
}
})
console.log(data)
}
onMounted(() => {
try {
gantt.value = Highcharts.ganttChart('container', {
title: {
text: 'hightCharts甘特圖示例'
},
xAxis: [{
currentDateIndicator: true,
tickPixelInterval: 70,
grid: {
borderWidth: 1, // 右側表頭邊框寬度
cellHeight: 35, // 右側日期表頭高度
},
labels: {
align: 'center',
formatter: function() {
return `${dayjs(this.value).format('M月D')} ${WEEKS[dayjs(this.value).day()]}`;
}
},
}, {
labels: {
align: 'center',
formatter: function() {
return `${dayjs(this.value).format('YYYY年M月')}`;
}
},
}],
yAxis: {
type: 'category',
grid: {
enabled: true,
borderColor: 'rgba(0,0,0,0.3)',
borderWidth: 1,
columns: [
{ title: { text: '工廠' }, labels: { format: '{point.factory}' } },
{ title: { text: '型號' }, labels: { format: '{point.material}' } },
]
}
},
tooltip: {
formatter: function () {
return `<div>
工廠: ${this.point.factory}<br/>
開始時間: ${dayjs(this.point.start).format('YYYY-MM-DD HH:mm:ss')}<br/>
結束時間: ${dayjs(this.point.end).format('YYYY-MM-DD HH:mm:ss')}<br/>
</div>`
}
},
series: [{ data: newData }],
plotOptions: {
series: {
animation: false, // Do not animate dependency connectors
dragDrop: {
draggableX: true, // 橫向拖拽
draggableY: true, // 縱向拖拽
dragMinY: 0, // 縱向拖拽下限
dragMaxY: 3, // 縱向拖拽上限
dragPrecisionX: 3600000 // 橫向拖拽精度，單位毫秒
},
dataLabels: {
enabled: true,
format: '{point.factory}-{point.uid}',
style: {
cursor: 'default',
pointerEvents: 'none'
}
},
allowPointSelect: true,
point: {
events: {
dragStart: dragStart,
drag: drag,
drop: drop,
select: handleSelect
}
}
}
},
exporting: {
sourceWidth: 1000
},
credits: { // 去掉右下角版權資訊
enabled: false
},
});
} catch (error) {
console.log(error)
}
})
return {
gantt,
getData
}
},
})
</script>
<style scoped>
.hightChart-gantt {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
#container {
max-width: 1200px;
min-width: 800px;
height: 400px;
margin: 1em auto;
}
</style>