Export Charts in dataviewjs codeblock

[Erielson1708]

When exporting a PDF of a page with a chart from the Charts plugin, the chart images don't show up. It's like the images are being ignored when within a dataviewjs codeblock.

Example:

Obsidian:

PDF:

Codeblock:

const current = dv.current();
const totalAulas = parseInt(dv.page("Educação alimentar - 7º ano A").total_aulas);
const comportamentoMau = parseInt(current.comportamento_mau);
const comportamentoMuitoMau = parseInt(current.comportamento_muito_mau);
const comportamento = Math.max(0, (((totalAulas - comportamentoMau - (comportamentoMuitoMau * 2)) / totalAulas) * 10).toFixed(1));
const faltas = parseInt(current.faltas);
const participacao = Math.max(0, ((totalAulas - faltas) / totalAulas) * 10).toFixed(1);
const n_atividades = parseInt(current.n_atividades);
const atividades_extras = parseInt(current.atividades_extras);
const total_atividades = parseInt(dv.page("Educação alimentar - 7º ano A").total_atividades);
const atividade = Math.min(10, ((n_atividades + atividades_extras) / total_atividades) * 10).toFixed(1);

const labelsWithValues = [
    `Comportamento (${comportamento})`,
    `Participação (${participacao})`,
    `Atividade (${atividade})`
];

dv.header(2, `Status`);

dv.paragraph(`\`\`\`chart
    type: radar
    labels: ${JSON.stringify(labelsWithValues)}
    series:
    - title: Atributos
      data: [${comportamento}, ${participacao}, ${atividade}]
      backgroundColor: 'rgba(255, 110, 110, 0.2)'
      borderColor: 'rgba(255, 110, 110, 1)'
    width: 70%
    labelColors: true
    legend: false
    fill: true
    beginAtZero: true
    bestFit: false
    bestFitTitle: undefined
    bestFitNumber: 0
\`\`\``)

[l1xnan]

Limited by the implementation mechanism of the plug-in, I need to clone the rendering result of the current page into the webview tag. In this process, the canvas image cannot be truly cloned, which has caused this problem. This issue is not easy to fix, I will try to solve it, but it may take more time.

[l1xnan]

You can try version 1.7.3, which converts the canvas to PNG to display the image. There are just some optimizations that still need to be completed.

[Erielson1708]

You can try version 1.7.3, which converts the canvas to PNG to display the image. There are just some optimizations that still need to be completed.

Problem solved. Thanks and congratulations on the plugin.

[l1xnan]

You can try version 1.7.3, which converts the canvas to PNG to display the image. There are just some optimizations that still need to be completed.

Problem solved. Thanks and congratulations on the plugin.

I also need to emphasize some unresolved issues:

1. In dark mode, there are color issues with exported images. You need to switch to light mode to export.
2. Since it's converted to an image, its style may differ from the normal canvas style. If you're concerned about this, you can address it by customizing the CSS snippet.