Obs134｜用Dataviewjs製作簡單的建檔統計圖－使用Charts外掛

h使用Charts外掛可以輕鬆地產生統計表，資料來源則使用Dataviewjs來查詢一段時間內的建檔筆記數量統計。

1. Charts基本使用

Charts外掛安裝後可以調用Insert new Chart命令，輸入三個欄位資料：

• X-Axis (X軸標題): Aug. 10, Aug. 11, Aug. 12
• Y-Axis Name (Y軸標題): Number of created
• Y-Axis Data (Y軸資料): 10, 5, 3
• Start at Zero: 勾選

```chart
type: bar
labels: [Aug. 10, Aug. 11, Aug. 12]
series:
  - title: Number of Created
    data: [10, 5, 3]
tension: 0.2
width: 80%
labelColors: false
fill: false
beginAtZero: true
bestFit: false
bestFitTitle: undefined
bestFitNumber: 0
```

2. Dataviewjs統計

• 建檔日期: 使用檔案的建檔時間。參考網頁使用的是YAML區的建檔欄位
• Markdown檔案下載: https://gist.github.com/emisjerry/75962dea57c095eabf44a7ee8692666a

---
aliases: []
created: 2023-05-22 18:32:55
modified: 2023-08-12 12:27:05
number headings: first-level 1, max 6, _.1.1.
tags: []
type:
  - 專案筆記
folder: '""'
daysback: 3
chartDays: 100
---
# Chart Test

```dataviewjs
const iDaysback = parseInt(dv.current().daysback) || 2;
const iChartDays = parseInt(dv.current().chartDays) || 10;

const lStartTime = moment();
const sFolder = dv.current().folder || '';  // 要統計的資料夾
// const dateField = 'created'; // 使用YAML欄位時需要
const sChartColor = '#4e9a06';
const oDocs = dv.pages(sFolder);

function getRecentDocs(iNumDays) {
  return oDocs.where(f => {
    //if (!f[dateField]) return false;  // 如果沒有日期欄位則不繼續處理
    const lPastTime = moment().subtract(iNumDays, 'days');
    let lDocTime = f.file.ctime;   // moment(f[dateField]);  //.toISO());
    let valid = lDocTime >= lPastTime && lStartTime >= lDocTime;  //.isAfter(lPastTime) && lDocTime.isBefore(start);
    return valid;
  });
}

// creating the table
var oChartDocs = getRecentDocs(iDaysback);

// 輸出表格樣式的符合條件筆記清單
dv.span(iDaysback + " days ago");
dv.table(['link', 'Created on'], oChartDocs
    .sort(file => file.file.ctime, 'desc')
    .map(page => [page.file.link, page.file.ctime]));

// creating the charts
var oChartDocs = getRecentDocs(iChartDays).sort(f => f.file.ctime);
var daysData = [];
var totalcount = 0;

dv.paragraph(iChartDays + " days ago");
// formatting the data
for (var i=0; i<=oChartDocs.length; i++) {
  var f = oChartDocs[i];
  if (f) {
    var itemDate = moment(f.file.ctime.ts);  //moment(f[dateField]);
    var newDate = moment(itemDate).format(&#039;MM-DD&#039;);
     var index = daysData.findIndex(d => d.label === newDate);
    if (index !== -1) {
        daysData[index].num += 1;  // 該日數值遞增
    } else {
        daysData.push({label: newDate, num: 1});  // 該日啟始為1
    }
    totalcount += 1;
  }
};

var labels = [], data = [], aggData = [];

daysData.map(el => {
  labels.push(el.label);
  data.push(el.num);

  if (aggData.length) {
    var lastNum = aggData[aggData.length - 1];
    aggData.push(el.num + lastNum);
  } else {
    aggData.push(el.num);
  }
});

const lineChart = {
  type: &#039;line&#039;,
  data: {
    labels: labels,
    datasets: [{
      label: &#039;Docs created&#039;,
      data: data,
      backgroundColor: [
        sChartColor
      ],
      borderColor: [
        sChartColor
      ],
      borderWidth: 1
    }]
  }
}

const aggregateChart = {
  type: &#039;line&#039;,
  data: {
    labels: labels,
    datasets: [{
      label: &#039;Aggregate Docs Created&#039;,
      data: aggData,
      backgroundColor: [
          sChartColor
      ],
      borderColor: [
          sChartColor
      ],
      borderWidth: 1
    }]
  }
}

dv.paragraph(&#039;Created Chart&#039;);
window.renderChart(lineChart, this.container);

dv.paragraph(&#039;Growth Chart&#039;);
window.renderChart(aggregateChart, this.container);

dv.paragraph(&#039;Total: &#039; + totalcount);
```

3. 相關鏈接

• 參考：A Graph for Zettelkasten: Measuring growth in Obsidian - Obsidian Rocks
  • Obsidian Charts Documentation - Obsidian Charts
• 範例.md下載: https://gist.github.com/emisjerry/75962dea57c095eabf44a7ee8692666a

4. 教學影片

＃＃

您可能也會有興趣的類似文章

• Obs137｜用Dataviewjs讀取CSV資料以繪製統計圖表 (0則留言, 2023/09/03)
• Obs135｜解鎖簡易Dataview查詢：驚人的SQL技巧，使用Query All The Things(QATT)外掛 (0則留言, 2023/08/19)
• Obs132｜標籤使用彙總與TagFolder：多重＋階層式標籤資料夾，更妥善使用＃標籤的技巧 (0則留言, 2023/06/24)
• Obs130｜用Dataviewjs將Dataview表格產生成Markdown格式，並複製到剪貼簿的技巧 (2則留言, 2023/05/20)
• Obsidian裡產生YouTube影片iframe的作法：使用Dataviewjs (0則留言, 2024/03/28)
• Obs131｜Obsidian使用Dataviewjs動態查詢的嘗試 (0則留言, 2023/05/27)
• Obs138｜以標籤為基底，用Dataview形成索引筆記的嘗試 (0則留言, 2023/09/03)
• Obs140｜Obsidian進階全文檢索與複製結果的外掛－Query Control、Better Search View、Float Search、Text Expand、File Cooker (0則留言, 2023/09/15)
• Obs149-左邊長筆記，右邊卡片的編輯佈局：Query Control, Note Gallary (0則留言, 2024/01/28)
• Obs126｜Obsidian 2023/04 7個新外掛介紹與評析 (0則留言, 2023/04/29)
• Obs153｜快速開啟外掛設定的方法；使用Open Plugin Settings與Advanced URI，透過Templater Hotkeys綁定快捷鍵 (0則留言, 2024/02/28)
• [Obs＃58] 快速開啟常用筆記的方法 (0則留言, 2021/10/23)
• Obs127｜用Templater Hotkeys簡化Obsidian自動化腳本，詳解4個腳本範例 (0則留言, 2023/05/05)
• Obs139｜5個方便維護Properties的外掛：Linter、TagMany、File Cooker、Tag Wrangler、Templater Hotkeys (0則留言, 2023/09/10)
• Obs136｜3 個方法讓你用Obsidian QATT外掛讀取外部檔案 (0則留言, 2023/08/27)