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

Я вызываю функцию экспорта в функции обратного вызова параметра onAnimationComplete на моем графике, поэтому экспорт не может быть выполнен до полного построения графика.

Вот как выглядят мои html2canvas и функции загрузки:

download() {
        this.dl.download = this.fileName;
        this.dl.click();
}

loadDataUrl($node) {
    this.hideUnwantedElements();
    html2canvas($node, {
        background: '#ffffff',
        scale: 4,
        proxy: 'proxy-for-cors-images',
        onrendered: (canvas) => {
            this.showElements();
            this.dl.href = canvas.toDataURL('image/jpeg');
        }});
}

Может кто-нибудь сказать мне, возможно ли даже экспортировать диаграммы Chart.js с html2canvas и если да, то как? Я также попробовал функцию toDataURL () на холсте диаграммы, но она возвращает только URL данных для прозрачного png.

0
DavidH 31 Авг 2017 в 13:52

3 ответа

На всякий случай, если у кого-то еще есть такая же проблема с обратным вызовом onComplete, который запускается слишком рано в Chart.js, вот как я смог это исправить, не добавив setTimeout:

Это правильный способ загрузить мои данные экспорта после завершения анимации

animation: {
   onComplete: () => {
   this.loadExportElements();
   }
}

Мой первый подход выглядел так и не работал:

animation: {
                onComplete: this.loadExportElements()
}
0
DavidH 31 Авг 2017 в 14:13

OnRendered теперь устарела

// мы нацеливаемся на легенду и ожидаем выполнения обещания, вы можете пропустить эту часть, если не хотите, чтобы легенда появилась

html2canvas($("#yourChartID").find("ul")[0]).then(grid1Legend => {

   var pdf = new jsPDF('l', 'pt', 'a3');
  var chart1 = $("#yourChartID").get(0).toDataURL("image/png", 1.0);
  var grid1LegendtoUrl = grid1Legend.toDataURL("image/jpeg", 1.0);
  pdf.text(675, 275,"my chart");
  pdf.addImage(chart1, 'JPEG', 590, 325);
  pdf.addImage(grid1LegendtoUrl, 'JPEG', 465, 475);
  pdf.save("state_summary.pdf");



});

В основном, html2canvas не сохранит ваш холст, вы можете указать htmltocanvas на диаграмму холста (chart.js) с помощью get (0), она захватит диаграмму, затем вручную добавит легенду и заголовок, как показано выше, и установит правильные кординаты.

0
Rajneesh Kumar Gobin 14 Июн 2018 в 07:36

animation:false

( • _ • )

(• _ •)> ⌐ ■ - ■

(⌐ ■ _ ■) <даааааа!

-5
Bibimission 4 Июн 2018 в 15:34