Я использую Chart.js. Я пытаюсь преобразовать диаграмму в изображение, получив 64 строки. Учебное пособие (http://www.chartjs.org/docs/) посвящает целую 1 строку теме:
Элемент canvas также позволяет сохранять содержимое в виде базовой строки 64, что позволяет сохранить диаграмму в виде изображения.
Элемент canvas имеет метод toDataURL, который возвращает строку base64 изображения. Однако, когда я делаю это, изображение, которое оно отображает, представляет собой просто прозрачный прямоугольник с размерами диаграммы, и оно не включает в себя содержимое диаграммы.
Вот скрипка: http://jsfiddle.net/KSgV7/
"Изображения" в скрипке имеют черную рамку, поэтому вы можете видеть, где они должны быть, так как они кажутся просто большим прозрачным блоком.
Кто-нибудь успешно конвертировал диаграмму Chart.js в изображение?
Диаграмма выглядит как асинхронная, поэтому вам, вероятно, потребуется выполнить обратный вызов, когда анимация закончится, или холст будет пустым.
var options = {
bezierCurve : false,
onAnimationComplete: done /// calls function done() {} at end
};
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
}
);
Сначала преобразуйте файл 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>
Вместо этого вы должны использовать функцию 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>Вы можете получить доступ к 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'
}
Вы также можете использовать анимацию параметров метода toBase64Image(): false
var options = {
bezierCurve : false,
animation: false
};
@EH_warch Вы должны использовать полный обратный вызов для генерации base64:
onAnimationComplete: function(){
console.log(this.toBase64Image())
}
Если вы видите белое изображение, это означает, что вы вызвали toBase64Image до его завершения.
я решил эту проблему в этом коде, используя библиотеку 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
}
}
},