每日字数的热力图

效果展示

仅在 win10 下测试

上图是 win10 Blue Topaz 主题 深色模式下 的效果，根据字数多少显示不同的颜色，鼠标悬浮到某个点会弹窗当天的日期和字数

由于 echarts 插件不能在 Android 上使用，因此 Android 上不能查看本文的热力图

插件及设置

1. better-word-count
2. obsidian-echarts
3. dataview

安装并打开这三个插件。

在 better word count 插件设置里打开【Collect Statistics】

dataview 插件打开 【Enable JavaScript Queries】

代码

新建一个 md 文件，输入

```dataviewjs
（将下面的代码粘贴到此处）
```

function getJsonLength(jsonData) {
    var length = 0;
    for (var ever in jsonData) {
        length++;
    }
    return length;
}

function getYMD(n) {
    var today = new Date();
    var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * n;
    today.setTime(targetday_milliseconds);
    var tYear = today.getFullYear();
    var tMonth = ("0" + (today.getMonth() + 1)).slice(-2);
    var tDate = ("0" + today.getDate()).slice(-2);
    return tYear + "-" + tMonth + "-" + tDate;
}

const jsonString = await app.vault.adapter.read(".obsidian/vault-stats.json");
const jsonObject = JSON.parse(jsonString);

const length = getJsonLength(jsonObject.history);
const YMD = [];
const ycount = [];
const data = [];

for (let i = 0; i < length; i++) {
    YMD.push(getYMD(0 - i));
    if (jsonObject.history[YMD[i]]) {
        ycount.push(jsonObject.history[YMD[i]].words);
    } else {
        ycount.push(0);
    }
    data.push([YMD[i], ycount[i]]);
}

const currentYear = new Date().getFullYear();

const option = {
    backgroundColor: "rgba(0, 0, 0, 0)",
    width: 800,
    height: 250,
    tooltip: {
        position: "top",
        trigger: "item",
        formatter: function (params) {
            let dataIndex = params.dataIndex;
            let date = data[dataIndex][0];
            let value = data[dataIndex][1];
            return `日期：${date}<br>字数：${value}`;
        },
        data: ["Label 1", "Label 2"],
    },
    visualMap: {
        type: "piecewise",
        splitNumber: 7,
        orient: "horizontal",
        left: "center",
        top: 0,
        textStyle: {
            color: "white",
        },
        pieces: [
            { gte: 0, lte: 500 },
            { gt: 500, lte: 1000 },
            { gt: 1000, lte: 3000 },
            { gt: 3000, lte: 5000 },
            { gt: 5000, lte: 8000 },
            { gt: 8000 },
        ],
        color: [
            "#FF0000",
            "#FF3319",
            "#FF8040",
            "#FF9933",
            "#FFB30F",
            "#c0a75c",
        ],
        calculable: true,
    },
    calendar: {
        left: 30,
        right: 10,
        range: currentYear,
        itemStyle: {
            normal: {
                color: "rgba(0, 0, 0, 0)",
                borderWidth: 2,
            },
        },
    },
    series: [
        {
            type: "scatter",
            coordinateSystem: "calendar",
            data: data,
        },
    ],
};

app.plugins.plugins["obsidian-echarts"].render(option, this.container);

注意事项

better word count 会将统计数据存在 .obsidian 文件夹下的 vault-stats.json 文件夹下，我们是通过读取这个文件来获取数据

因此我们的热力图只能统计安装 better word count 并打开【Collect Statistics】之后的每日字数

相关内容

Obsidian 插件：Heatmap Calendar

Obsidian 插件：Daily Stats 自动统计笔记更新修改的热力图

讨论

若阁下有独到的见解或新颖的想法，诚邀您在文章下方留言，与大家共同探讨。