每日字数的热力图

每日字数的热力图

效果展示

每日字数的热力图--效果展示

仅在 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: '2023',
		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 自动统计笔记更新修改的热力图

讨论

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



反馈交流

其他渠道

版权声明