Преобразование диаграммы холста Chart.js в изображение с использованием .toDataUrl() приводит к пустому изображению

Я использую Chart.js. Я пытаюсь преобразовать диаграмму в изображение, получив 64 строки. Учебное пособие (http://www.chartjs.org/docs/) посвящает целую 1 строку теме:

Элемент canvas также позволяет сохранять содержимое в виде базовой строки 64, что позволяет сохранить диаграмму в виде изображения.

Элемент canvas имеет метод toDataURL, который возвращает строку base64 изображения. Однако, когда я делаю это, изображение, которое оно отображает, представляет собой просто прозрачный прямоугольник с размерами диаграммы, и оно не включает в себя содержимое диаграммы.

Вот скрипка: http://jsfiddle.net/KSgV7/

"Изображения" в скрипке имеют черную рамку, поэтому вы можете видеть, где они должны быть, так как они кажутся просто большим прозрачным блоком.

Кто-нибудь успешно конвертировал диаграмму Chart.js в изображение?

Ответ 1

Диаграмма выглядит как асинхронная, поэтому вам, вероятно, потребуется выполнить обратный вызов, когда анимация закончится, или холст будет пустым.

var options = {
    bezierCurve : false,
    onAnimationComplete: done  /// calls function done() {} at end
};

Ответ 2

API Chart.JS изменился с тех пор, как он был опубликован, и старые примеры, похоже, не работают для меня. вот обновленная скрипка, которая работает на более новых версиях

HTML:

<body>
    <canvas id="canvas" height="450" width="600"></canvas>
    <img id="url" />
</body>

JS:

function done(){
  alert("haha");
  var url=myLine.toBase64Image();
  document.getElementById("url").src=url;
}

var options = {
  bezierCurve : false,
  animation: {
    onComplete: done
  }
};

var myLine = new 
   Chart(document.getElementById("canvas").getContext("2d"),
     {
        data:lineChartData,
        type:"line",
        options:options
      }
    );

http://jsfiddle.net/KSgV7/585/

Ответ 3

Сначала преобразуйте файл Chart.js в base64.

var url_base64 = document.getElementById('myChart').toDataURL('image/png');

Установите его как атрибут href для тега привязки.

link.href = url_base64;

<a id='link' download='filename.png'>Save as Image</a>

Ответ 4

Вместо этого вы должны использовать функцию API toBase64Image() и вызывать ее после завершения анимации. Следовательно:

var pieChart, URI;

var options = {
    animation : {
        onComplete : function(){    
            URI = pieChart.toBase64Image();
        }
    }
};

var content = {
    type: 'pie', //whatever, not relevant for this example
    data: {
        datasets: dataset //whatever, not relevant for this example
    },
    options: options        
};    

pieChart = new Chart(pieChart, content);

пример

Вы можете проверить этот пример и запустить его

var chart = new Chart(ctx, {
   type: 'bar',
   data: {
      labels: ['Standing costs', 'Running costs'], // responsible for how many bars are gonna show on the chart
      // create 12 datasets, since we have 12 items
      // data[0] = labels[0] (data for first bar - 'Standing costs') | data[1] = labels[1] (data for second bar - 'Running costs')
      // put 0, if there is no data for the particular bar
      datasets: [{
         label: 'Washing and cleaning',
         data: [0, 8],
         backgroundColor: '#22aa99'
      }, {
         label: 'Traffic tickets',
         data: [0, 2],
         backgroundColor: '#994499'
      }, {
         label: 'Tolls',
         data: [0, 1],
         backgroundColor: '#316395'
      }, {
         label: 'Parking',
         data: [5, 2],
         backgroundColor: '#b82e2e'
      }, {
         label: 'Car tax',
         data: [0, 1],
         backgroundColor: '#66aa00'
      }, {
         label: 'Repairs and improvements',
         data: [0, 2],
         backgroundColor: '#dd4477'
      }, {
         label: 'Maintenance',
         data: [6, 1],
         backgroundColor: '#0099c6'
      }, {
         label: 'Inspection',
         data: [0, 2],
         backgroundColor: '#990099'
      }, {
         label: 'Loan interest',
         data: [0, 3],
         backgroundColor: '#109618'
      }, {
         label: 'Depreciation of the vehicle',
         data: [0, 2],
         backgroundColor: '#109618'
      }, {
         label: 'Fuel',
         data: [0, 1],
         backgroundColor: '#dc3912'
      }, {
         label: 'Insurance and Breakdown cover',
         data: [4, 0],
         backgroundColor: '#3366cc'
      }]
   },
   options: {
      responsive: false,
      legend: {
         position: 'right' // place legend on the right side of chart
      },
      scales: {
         xAxes: [{
            stacked: true // this should be set to make the bars stacked
         }],
         yAxes: [{
            stacked: true // this also..
         }]
      },
      animation : {
         onComplete : done
      }      
   }
});

function done(){
    alert(chart.toBase64Image());
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx" width="700"></canvas>

Ответ 5

Вы можете получить доступ к afterRender с помощью plugins.

И здесь - все доступные плагины api.

В html файле:

<html>
  <canvas id="myChart"></canvas>
  <div id="imgWrap"></div>
</html>

В файле js:

var chart = new Chart(ctx, {
  ...,
  plugins: [{
    afterRender: function () {
      // Do anything you want
      renderIntoImage()
    },
  }],
  ...,
});

const renderIntoImage = () => {
  const canvas = document.getElementById('myChart')
  const imgWrap = document.getElementById('imgWrap')
  var img = new Image();
  img.src = canvas.toDataURL()
  imgWrap.appendChild(img)
  canvas.style.display = 'none'
}

Ответ 6

Вы также можете использовать анимацию параметров метода toBase64Image(): false

var options = {
    bezierCurve : false,
    animation: false
};

Обновлен скрипт

Ответ 7

@EH_warch Вы должны использовать полный обратный вызов для генерации base64:

onAnimationComplete: function(){
    console.log(this.toBase64Image())
}

Если вы видите белое изображение, это означает, что вы вызвали toBase64Image до его завершения.

Ответ 8

я решил эту проблему в этом коде, используя библиотеку Chartjs.js

HTML-код:

<img id="ChartImage" style="margin: 0 auto;" />
<canvas id="myChart" style="margin: 0 auto;" ></canvas>

Опция диаграммы Javascript:

options: {
  legend: { position: 'bottom', display: true },
  animation: {
     onComplete: function(){
        var url = barChart.toBase64Image(); //get image as base64
        document.getElementById("ChartImage").src = url; //to fill image in html
     }
  }    
},