gantt甘特圖可拖拽、編輯(vue、react都可用 highcharts)

前言

　  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>