前言

• 昨天我挑戰使用「非 Office」來繪製甘特圖，來看看是否一樣令人反感？
• 先前我都用 Observable 或是 D3 來畫圖，怎麼突然用了 picasso.js ？
• 阿就因為官方文件並沒有釋出範例呀，網友們都自行土炮。 這對於傳產人員來說，有點障礙。

簡介

• 一個以元件為基礎的開源圖表函示庫，把資料做視覺化。
• 一張圖是由多個元件組合而成，包含資料顯示樣式(如線條、直條圖等)、連續性的軸和分離式的軸。
• 使用許多 D3 的特色，有可擴充的系統。

參考資料 https://qlik.dev/libraries-and-tools/picassojs

範例圖

• 參考 picasso.js 官方文件同樣也提供許多的常見的範例圖表，昨天畫的甘特圖可以在這裡找到範例圖，一開始還沒有頭緒時，先觀察程式碼，了解圖形需要的資料會有什麼，針對需求去做修改。
• 以昨天的程式碼為範例
• 
  • picasso.chart () 是一個用來創造和畫圖表的函式
  • 在這個函式裡面包含三個主要的部份: 元素、資料、設定
    • 元素是指 HTML element，這個範例程式碼式選擇 id為 container 的元素作為圖要畫的地方
    • 資料是一個物件，提供要畫圖的資料來源，範例程式碼是一個 2D 陣列，陣列裡面包含 13 個不同的陣列數值。
    • 設定裡面包含scales、components
      • scales 會將資料做映射 (map)縮放，畫出來的圖 x 軸是時間 (t)，其中時間包含開始和結束兩個值，y 軸是類別 (category)。
        
      • components 是構成一張圖的元件，如常條圖是由多個 bar 組合而成。

      components: [{
            // 在 x 軸的資料時間加上垂直線
            type: 'grid-line', 
            x: 't'
          },{
            // 指定 y 軸的類別標示顯示在左邊
            type: 'axis',
            dock: 'left',
            scale: 'y'
          },{
            // 指定 x 軸的時間顯示在下方
            type: 'axis',
            dock: 'bottom',
            scale: 't',
            //　指定時間格式是年－月
            formatter: {
              type: 'd3-time',
              format: '%Y-%m'
            }
          },{
           // 甘特圖由多條 bar 組成
            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: {
                width: 0.8
              }
            }
          }, {
          // 標示每個分類的天數
          type: 'labels',
          displayOrder: 2,
          // 設定格式
          settings: {
            sources: [{
              component: 'bars',
              selector: 'rect',
              strategy: {
                type: 'bar',
                settings: {
                  direction: 'right',
                  labels: [{
                    placements: [{
                      position: 'outside'
                    }],
                    // 計算經過天數，`Math.round()`四捨五入取整數，864e5 是一天的毫秒數。
                    label: node => `${Math.round((node.data.end.value - node.data.start.value) / 864e5)} days`
                  }]
                }
              }
            }]
          }
        }]
        }
      })