data = {
var jobs = [
['合作諮詢與討論', '2022-06-09', '2022-09-30'],
['合約書討論與簽訂', '2022-09-01', '2023-01-09'],
['跟美國接洽實驗水盒', '2023-02-15', '2023-11-15'],
['技轉與接洽台灣製造商', '2023-02-03', '2023-04-30'],
['討論FDA送件內容', '2023-04-01', '2023-04-30'],
['跟美國購買實驗水盒', '2023-05-26', '2023-11-15'],
['撰寫與修訂合作計畫書', '2023-04-11', '2023-05-30'],
['設計實驗與購買器材', '2023-06-01', '2023-07-15'],
['實驗室購買原料', '2023-06-01', '2023-11-07'],
['金屬離子檢驗方法建立', '2023-07-15', '2023-08-31'],
['購買藥水容器與滅菌', '2023-08-12', '2023-09-02'],
['FCMCS 提供實驗測試方法', '2023-09-18', '2025-09-30'],
['試合成藥水', '2023-09-01', '2023-09-22'],
['反應槽材質選擇', '2023-09-25', '2023-10-08'],
['實驗室建立小型生產線', '2023-10-31', '2023-11-21'],
['金屬離子濃度高重買原料', '2023-07-03', '2023-11-07'],
['原料貨源短缺', '2023-10-13', '2023-11-07'],
['補買水盒缺少配件', '2023-11-15', '2024-02-28'],
['與亮宇生物接洽和實驗', '2023-10-15', '2026-09-04'],
['與英國接洽阿米巴保密合約和實驗', '2023-10-13', '2024-12-31'],
['品質驗證', '2023-10-13', '2024-12-31'],
['加速架儲期', '2023-12-08', '2025-04-25'],
['FDA送件與審查', '2025-07-01', '2026-01-31'],
['實時架儲期', '2023-11-24', '2026-09-04'],
];
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.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: {
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`
}]
}
}
}]
}
}]
}
})
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
