每日字数的热力图
效果展示
仅在 win10 下测试
上图是 win10 Blue Topaz 主题 深色模式下 的效果,根据字数多少显示不同的颜色,鼠标悬浮到某个点会弹窗当天的日期和字数
由于 echarts 插件不能在 Android 上使用,因此 Android 上不能查看本文的热力图
插件及设置
安装并打开这三个插件。
在 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 插件:Daily Stats 自动统计笔记更新修改的热力图
讨论
若阁下有独到的见解或新颖的想法,诚邀您在文章下方留言,与大家共同探讨。
反馈交流
其他渠道
版权声明
版权声明:所有 PKMer 文章如果需要转载,请附上原文出处链接。