我用的是ChartJS的极Map。我在动态加载图表。
const chartData = [
[10, 20, 30],
[20, 30, 40],
[30, 40, 50]
];
// Loop through the chart data and create a chart for each
for (let i = 0; i < chartData.length; i++) {
debugger;
// Create a canvas element with a unique ID
const canvas = document.createElement('canvas');
canvas.id = `chart-${i}`;
canvas.style.width = '100px';
canvas.style.height = '100px';
// Add the canvas to the page
const chartContainer = document.getElementById('chart-containerpolar');
chartContainer.appendChild(canvas);
// Create a new Chart object for the canvas
const chart = new Chart(canvas, {
type: 'polarArea',
data: {
datasets: [{
data: chartData[i],
backgroundColor: [
"rgb(68, 114, 197)",
"rgb(255, 191, 0)",
"rgb(104, 163, 68)"
//'rgba(75, 192, 192, 0.2)',
//'rgba(153, 102, 255, 0.2)',
//'rgba(255, 159, 64, 0.2)'
],
}],
labels: ['Part1', 'Part2', 'Part3']
},
options: {
responsive: true,
/* maintainAspectRatio: false,*/
scale: {
ticks: {
beginAtZero: true
}
}
}
});
}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div id="chart-containerpolar"></div>
我怎样才能减小width=“100px”height=“100px”的画布的大小。我尝试了所有方法,但图表加载了默认值。我尝试了maintainAspectRatio:false但之后图表会消失。
1条答案
按热度按时间2nbm6dog1#
CharJS相对于父容器调整画布的大小。所以如果你想减小画布的大小,那么你只需要减小它的容器的大小。
有关更多信息,请查看此文档指南以了解响应性
下面是修改后的代码(修改仅在
.html
文件中)