Início / coding / Perguntas / 77771884
Accepted
PhDoanh
Asked: 2024-01-07 12:16:19 +0800 CST

Problema Chart.js: Existe alguma maneira de converter dados de uma tabela de markdown em um gráfico?

  • 772

Estou usando o Obsidian para fazer minhas anotações, é um aplicativo que permite escrever notas em formato markdown e usar plugins da comunidade (como extensões da Chrome Store). Então instalei dois plugins chamados Dataview (permite incorporar blocos de código dataviewjs ) e Obsidian Chart (suporta integração de Dataview para desenhar gráficos). Esses dois plug-ins se unem para que eu possa usar o Chart.js assim:

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

O bloco de código acima renderizará o gráfico a seguir . Voltando ao problema principal, agora crio uma tabela de dados de informações do sono da seguinte forma:

|   | 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 |
  • Minha pergunta é: título acima : v

DESDE JÁ, OBRIGADO!!!

Estou tentando acessar as células de dados das linhas: Hora de dormir, Despertar e Duração do sono para representá-las em um gráfico como este . Isso é tudo!

javascript

1 respostas

  1. Best Answer

    Bem, não sou especialista em Obsidian, nem nos plugins que existem por aí, mas se você verificar a documentação dos "Gráficos de Obsidiana" poderá ver que a conexão básica tabela-gráfico funciona ( link da documentação ) . Basta nomear a tabela ^tableName. E crie o gráfico com:

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

    Isso geraria este gráfico:
    Plug-in de criação de gráfico de captura de tela

    Mas acho que para o gráfico específico que você procura, será necessária alguma codificação, já que, pelo que posso ver, o plugin suporta todos os recursos do chartjs.

    Dito isso, se eu tivesse que resolver isso, usaria dataviewjspara criar o javascript, que carrega a tabela e constrói o gráfico.

    Aqui está uma breve demonstração documentada, explicando como abordar isso:
    (Esta é apenas uma demonstração parcial e deve ser otimizada)

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

```

    isso deve gerar um gráfico como este:
    captura de tela Gráfico gerado por obsidiana

    Informação: para criar as linhas que faltam em sua imagem, você simplesmente teria que adicionar um conjunto de dados de duas linhas à chartConfigvariável, como neste exemplo oficial .

    aliás: ao construir esta demo, percebi que os plugins ou Obsidian, apresentam alguns bugs, então a renderização pode variar ou produzir erros, mas uma simples reinicialização do aplicativo/plugins, às vezes corrige os problemas.

    • 1

relate perguntas