前言

• 終於來到我以前不太喜歡的東西、甘特圖(Gannt Chart)
• 這不得不提到我先前上班的地方，人很多的公司，人一多起來，管理起來麻煩、合作的效率也不是很好。
• 那時候的我擔任「製程整合工程師」，但我覺得那時的我根本不是工程師，反倒像是個「PM」。
• 如何在有限時間內完成任務？ — 用「甘特圖」排程 握有時間管控力 - 今周刊
• 因為當時的小主管、大主管都深信只要我每週花 6 ~ 8 小時，讓製程整合工程師用 Excel 畫好甘特圖、塗好顏色、提整字型大小，然後讓他們拿去向上回報，整個產線都不會 Delay 了。

對，每個禮拜都要畫
而且是逼員工加班畫圖呢！！

預備知識

• 甘特圖的功用，是用一張圖表示，被拆分成細項的工作或任務，於何時需要開始進行、預計什麼時候結束、需要費時多久。

參考做法

• 由於，D3 畫廊裡面並沒有甘特圖，所以借用了一下開源的力量，找到了一篇用 Picasso.js 實作的甘特圖。

實作

引用套件

• 首先，透過 require 的方式引入 picasso.js 套件
  • 關於 require 的用法，請參考 實用 JavaScript 工具庫：RequireJS - iThome Tony1223 大大的文章
    

繪圖函數

• 接著把參考資料中的 picasso.chart 函式複製過來並稍做修改，程式碼如下：
  • 我幫他加了顏色...先在六個指定的顏色陣列中，隨機挑選來幫甘特圖的長條著色

  picasso.chart({
    element: document.querySelector('#container'),
    data,
    settings: {
      scales: {
        y: {
          data: { extract: { field: 'Category' } }
        },
        t: {
          data: { fields: ['Started', 'Ended'] },
          expand: 0.1
        }
      },
      components: [{
        type: 'grid-line',
        x: 't'
      },{
        type: 'axis',
        dock: 'left',
        scale: 'y'
      },{
        type: 'axis',
        dock: 'bottom',
        scale: 't',
        formatter: {
          type: 'd3-time',
          format: '%Y-%m'
        }
      },{
        key: 'bars',
        type: 'box',
        data: {
          extract: {
            field: 'Category',
            props: {
              start: { field: 'Started' },
              end: { field: 'Ended' }
            }
          }
        },
        settings: {
          orientation: 'horizontal',
          major: { scale: 'y' },
          minor: { scale: 't' },
          box: {
            fill: function(d){
              let colors = ["blue", "green", "purple", "orange", "yellow"];
              return colors[Math.floor(Math.random() * colors.length)];
            },
            width: 0.8
          }
        }
      }, {
      type: 'labels',
      displayOrder: 2,
      settings: {
        sources: [{
          component: 'bars',
          selector: 'rect',
          strategy: {
            type: 'bar',
            settings: {
              direction: 'right',
              labels: [{
                placements: [{
                  position: 'outside'
                }],
                label: node => `${Math.round((node.data.end.value - node.data.start.value) / 864e5)} days`
              }]
            }
          }
        }]
      }
    }]
    }
  })
  

資料部分

• 觀察一下別人的資料長得怎麼樣
• 肉眼觀察，就是一個 data 裝 Array
  • Array 中裝了 type 和 data
  • 先不管他要怎麼包，或許別有用途，我們不是專門在研發這種功能的人，照樣造句就好了，Task 1 改成 工作名字，後面的兩個數字，就是 js 的 Date() 格式換成毫秒數
  • 請參考：MDN 對於 Date 的定義
    
  • 像我看到這一串落落長的數字，又是 14... 開頭的，大概可以猜到他就是時間。
  • 怎麼換算呢？等等演示。

產生資料

data = {
  var jobs = [
    ['宮廟修繕招標', '2022-09-15', '2022-09-30'],
    ['得標公告', '2022-10-01', '2022-10-05'],
    ['開工典禮', '2022-10-05', '2022-10-06'],
    ['建築師勘查', '2022-10-06', '2022-10-08'],
    ['繪製工程圖', '2022-10-07', '2022-10-09'],
    ['拆除作業', '2022-10-11', '2022-10-13'],
    ['整修作業', '2022-10-13', '2022-10-20'],
    ['裝回作業', '2022-10-15', '2022-10-25'],
    ['驗收作業', '2022-10-26', '2022-10-31'],
  ];
  var arr = [
    ['Category', 'Started', 'Ended'],
  ];
  
  for (var i = 0; i < jobs.length; i++) {
	var job_start = new Date(jobs[i][1]).valueOf();    // 起始日期換算成毫秒
    var job_end = new Date(jobs[i][2]).valueOf();    // 結束日期換算成毫秒
    arr.push([
      jobs[i][0],
      job_start,
      job_end
    ]);
  }
  return [{
    type: 'matrix',
    data: arr
  }];
}

完成了

心得

• 今天做的內容，就是把人類寫出來的日期格式，用一個迴圈，逐項轉換變成 picasso.js 接受的格式（毫秒型態的時間格式）
• 至於 for 迴圈是什麼？ 現在的國中生應該都會，或者是板上有很多高手可以解釋這個問題，今天就不探討這塊了。