这是演示说明中出现的脚本 API 展示。Weight Tracker
通过在创建日记的模板中添加为提升属性,您可以聚合数据并绘制权重随时间的变化。weight
实现¶
上面屏幕截图中的注释属于 类型 。这种类型的笔记本身没有任何有用的内容。相反,它是一个占位符,脚本可以在其中呈现其输出。Weight TrackerRender Note
的脚本在名为 的关系中定义。在此示例中,它是 的子项 。实现由两个代码注释组成,分别包含一些 HTML 和 JavaScript,它们加载所有带有属性的注释并在图表中显示它们的值。Render Notes~renderNoteWeight TrackerImplementationweight
为了实际渲染图表,我们使用了一个名为 chart.js的第三方库,该库作为附件导入,因为它没有内置到 Trilium 中。
法典¶
以下是放置在类型代码注释中的脚本内容:JS Frontend
async function getChartData() {
const days = await api.runOnBackend(async () => {
const notes = api.getNotesWithLabel('weight');
const days = [];
for (const note of notes) {
const date = note.getLabelValue('dateNote');
const weight = parseFloat(note.getLabelValue('weight'));
if (date && weight) {
days.push({ date, weight });
}
}
days.sort((a, b) => a.date > b.date ? 1 : -1);
return days;
});
const datasets = [
{
label: "Weight (kg)",
backgroundColor: 'red',
borderColor: 'red',
data: days.map(day => day.weight),
fill: false,
spanGaps: true,
datalabels: {
display: false
}
}
];
return {
datasets: datasets,
labels: days.map(day => day.date)
};
}
const ctx = $("#canvas")[0].getContext("2d");
new chartjs.Chart(ctx, {
type: 'line',
data: await getChartData()
});
如何从顶部栏中删除“体重跟踪器”按钮¶
在 的链接映射中,有一个名为 的注释。打开它并删除或注释掉其内容。重新启动 Trilium 后,该按钮将消失。Weight TrackerButtonWeight Tracker