我正在使用 Obsidian 做笔记,它是一个允许以 Markdown 格式编写笔记并使用社区插件(如 chrome 商店扩展)的应用程序。所以我安装了两个名为 Dataview (允许嵌入 dataviewjs 代码块)和 Obsidian Chart (支持集成 Dataview 绘制图表)的插件。这两个插件组合在一起,所以我可以像这样使用 Chart.js:
test:: First Test
mark:: 6
```dataviewjs
const data = dv.current()
const chartData = {
type: 'bar',
data: {
labels: [data.test],
datasets: [{
label: 'Grades',
data: [data.mark],
backgroundColor: [
'rgba(255, 99, 132, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)'
],
borderWidth: 1
}]
}
}
window.renderChart(chartData, this.container);```
上面的代码块将渲染 。回到主要问题,我现在创建一个睡眠信息的数据表如下:
| | Mon | Tue | Wed | Thu | Fri | Sat | Sun |
| ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- |
| Bedtime | 09.30 | 22 | 22.30 | 21.45 | 23 | 22 | 21 |
| Wake up | 05.45 | 06.30 | 22 | 5.30 | 5.45 | 5 | 7 |
| Sleep duration | 5 | 7 | 7.5 | 8 | 6.5 | 7 | 5 |
提前致谢!!!
好吧,我不是黑曜石专家,也不是那里的插件专家,但如果您检查“黑曜石图表”的文档,您会发现基本的表格图表连接有效(文档链接) 。只需将表命名为
^tableName
。并使用以下命令创建图表:
type: bar
id: ^tableName
layout: rows
width: 80%
beginAtZero: true
这将生成此图表:
但我认为对于您想要的特定图表,需要一些编码,因为据我所知,该插件确实支持所有 ChartJS 功能。
也就是说,如果我必须解决这个问题,我会使用
dataviewjs
创建 javascript,加载表格并构建图表。
这里有一个简短的记录演示,解释了如何解决这个问题:
(这只是部分demo,还有待优化)
```dataviewjs
// Generate the labels, from the html table
let labels = [].map.call(document.body.querySelectorAll('table.table-editor thead th'),
(x) => x.innerText).filter( x=> x.replace(/\n|\t|\s/gi, '') != '');
// Get the table, from the html table
let htmlTable = document.body.querySelector('table tbody')
let rows = [].map.call(htmlTable.querySelectorAll('tr'), x => x)
let data = '1'.repeat(2).split('').map( x => []);
let colsLength = [].map.call(rows[0].querySelectorAll('td'), x => x).length;
// creating the data form needed for floating bar charts: [ [start, end], ...]
for(let cIdx = 1; cIdx < 8; cIdx++){
data.push([])
for(let rowIdx = 0; rowIdx < 2; rowIdx++){
let cols = [].map.call(rows[rowIdx].querySelectorAll('td'), x => moment(x.innerText, 'hh:mm'));
data[cIdx - 1].push(cols[cIdx] );
}
}
// chartjs config
let chartConfig = {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: '',
data: data,
borderWidth: 1
}]
},
options:{
scales: {
y: {
min: moment('00:00:00', 'hh:mm'),
max: moment('23:59:59', 'hh:mm'),
ticks: {
stepSize: 60,
beginAtZero: false,
},
type: 'time',
time:{
minutes: 'hh:mm'
}
}
}
}
};
window.renderChart(chartConfig, this.container);
```
这应该生成这样的图表:
信息:要从图像中创建缺失的线条,您只需将两行数据集添加到
变量中,如这个官方示例中所示。chartConfig