我有以下容器div,我将一组canavs附加到这样的容器中:
<div id="graph" style="width: 90%">
<div id="canvas-holder" style="width: 25%">
<div id="lbl_div">
</div>
</div>
</div>
<style>
#canvas-holder
{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-auto-rows: minmax(100px, auto);
}
.canvas
{
border-style: solid;
border-width: 1px;
border-color: #878787;
}
#lbl_div
{
grid-column: 1;
grid-row: 1/7;
}
</style>
我的功能:
var canvasId = 0;
categorizeData.forEach(function(element,index) {
canvasId++;
var canvas = document.createElement('canvas');
canvas.id = 'chart-area'+canvasId;
canvas.className = "canvas";
var canvasDiv = document.getElementById('canvas-holder');
canvasDiv.appendChild(canvas);
var myData = element.split(',').map(function(item){ return +item;});
var ctx = canvas.getContext('2d');
DrawChart(ctx,myData,backgroundColors,mylabel,departments[index]);
});
function DrawChart(ctx, data, backgroundColors, mylabel, title) {
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: mylabel,
label: '# grades',
datasets: [{
data: data,
backgroundColor: backgroundColors,
borderColor: backgroundColors,
borderWidth: 1
}]
},
options: {
responsive: true,
title: {
display: true,
text: title,
fontSize: 20,
fontFamily: "'Amiri', 'serif'"
},
layout: {
padding: {
left: 2,
right: 2,
top: 5,
bottom: 5
}
},
legend: {
display: false,
labels: {
fontColor: 'rgb(255, 99, 132)'
}
}
}
});
}
我的主要问题是要允许将这些图表导出到一个文件中。