如何最小化ChartJS动态加载的极区图的大小

yrefmtwq  于 2023-04-06  发布在  Chart.js
关注(0)|答案(1)|浏览(137)

我用的是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但之后图表会消失。

2nbm6dog

2nbm6dog1#

CharJS相对于父容器调整画布的大小。所以如果你想减小画布的大小,那么你只需要减小它的容器的大小。
有关更多信息,请查看此文档指南以了解响应性
下面是修改后的代码(修改仅在.html文件中)

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" style="width: 300px; height: 300px"></div>

<!-- You need to make sure that container has the proper size and width so that chart canvas can take the size relatively to it's parent -->

相关问题