体重追踪器

这是演示说明中出现的脚本 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

“您的支持是我持续分享的动力”

微信收款码
微信
支付宝收款码
支付宝

目录关闭