图表插件选了插件库里下载量最大的charts。
这里dataview内联属性的形式是
[体重:: ]
[运动时间:: ]
记在每日日记里(每个日记对应一个md文件,文件名是日期)。日记的文件路径是”1. 日记“,路径情况大致如下:
- 1. 日记
--- 2025-01-01
--- 2025-01-02
--- 2025-01-03
目标是把这两种属性可视化在一张图上。x轴是日期(文件名),左边的y轴是体重,右边的y轴是运动时间,代码如下:
const rawData = await dv.query('TABLE file.name,体重,运动时间 from "1. 日记"');
const rows = rawData.value.values;
const chartData = {
type: 'line',
data: {
labels: rows.map(x => x[1]),
datasets: [
{label: '体重', yAxisID: 'A',data: rows.map(x => x[2]),backgroundColor: ['#2D3142'],borderColor: ['#2D3142']},
{label: '运动时间',yAxisID: 'B',data: rows.map(x => x[3]), backgroundColor: ['#EF3054'],borderColor: ['#EF3054']},
],
},
options: {
scales: {
A: {
type: 'linear',
position: 'left',
max: 75,
min: 65
},
B: {
type: 'linear',
position: 'right',
max: 6,
min:0
}
}
}
}
window.renderChart(chartData, this.container);
一些参考文档:
charts文档
dataview文档
chart.js文档
dataview文档
Q.E.D.