Javascript Js问题：有没有办法将数据从标记表转换成图表

嗯，我不是黑岩专家，也不是插件专家，但如果你查看"黑岩图表"的文档，你会发现基本的表格-图表连接是有效的(100).只需将表命名为^tableName.并使用以下命令创建图表:

type: bar
id: ^tableName
layout: rows
width: 80%
beginAtZero: true

This would generate this chart:

但我认为对于你想要的特定图表，将需要一些编码，因为据我所见，该插件确实支持所有的chartjs功能.

也就是说，如果我必须解决这个问题，我会使用dataviewjs来创建装入表格并构建图表的Java脚本.

Here a short documented Demo, explaining how to approach this:
(This is just a partial demo, and should be optimized)

```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);

```

this should generate a chart like this:

Info:要从图像中创建缺失的行，只需将两行数据集添加到chartConfig变量中，如this official example所示.

btw:,while building this demo, i noticed that the plugins or Obsidian, is abit buggy, so the rendering can vary or produce errors, but a simple restart of the application/plugins, fixes sometimes the problems..