Визуализация диаграммы js на скрытом DIV - PullRequest
Новая
       31

Визуализация диаграммы js на скрытом DIV

0 голосов
/ 06 февраля 2020

Я пытаюсь отобразить много диаграмм, используя диаграмму. js на скрытом элементе div, а затем преобразовать их в изображения для использования в отчете PDF.

Моя проблема: если диаграмма не отображается в DOM, я не могу ее захватить и нарисовать на canvas. Пока диаграмма не отображается, она не отображается. Я пытался использовать методы draw и render из chart.js, но они не дают желаемых результатов.

Вот мой пример HTML: 

<div style="display: none;">
  <canvas id="myChart"></canvas>
</div>

И мой соответствующий JavaScript: 

var canvas: any = document.getElementById('myChart');
var ctx: any = canvas.getContext('2d');
var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'line',
    // The data for our dataset
    data: {
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [{
            label: 'My First dataset',
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45]
          }]
        },

        // Configuration options go here
        options: {}
      });

for (var id in Chart.instances) {
    Chart.instances[id].resize();
    Chart.instances[id].draw('1s');
    Chart.instances[id].render('1s');
    console.log(Chart.instances[id].toBase64Image());
}

Можно ли как-нибудь вручную визуализировать диаграмму без ее отображения, а затем захватить вывод в виде изображения?

1 Ответ

1 голос
/ 08 февраля 2020

Самый быстрый взлом будет заменить: 

<div style="display: none;">

на 

<div style="position:absolute;left:-9999px;top:-9999p">

, и он будет работать: https://jsfiddle.net/FGRibreau/n1cx9d70/2/:)

PS: если вам нужно отобразить диаграмму на стороне сервера (например, в пакете), чтобы затем внедрить ее в отчеты PDF, то вы можете рассмотреть возможность использования выделенных сервисов, таких как Image-Charts .

...