Chart.js 问题：有没有办法将 Markdown 表中的数据转换为图表？

Question

我正在使用 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 |

• 我的问题是：以上标题：v

提前致谢！！！

我正在尝试访问行的数据单元格：就寝时间、唤醒时间和睡眠时间持续时间，以在类似的图表中表示它们。仅此而已！

Answer 1

好吧，我不是黑曜石专家，也不是那里的插件专家，但如果您检查“黑曜石图表”的文档，您会发现基本的表格图表连接有效（文档链接） 。只需将表命名为

^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

变量中，如这个官方示例中所示。