图表高度在破坏画布后创建新图表时会变得混乱

Question

在最初创建图表期间，它的渲染效果非常完美，如下所示 但是当我使用我的过滤器来获取动态数据集并渲染我的图表时，在销毁创建的初始图表后，我的图表的高度变得混乱，我尝试了所有诸如响应式、维护纵横比之类的方法，但它们似乎都不起作用。附在下面。 我对此很陌生，任何人都可以帮忙。 我将在下面提供我的图表代码以供参考。 初始代码：

success: function (response) {
    labelsAverageChart = response.data.map(item => item.cGAAname);
    let completedData = response.data.map(item => item.completed);
    let acceptedData = response.data.map(item => item.accepted);
    let onHoldData = response.data.map(item => item.onHold);
    let cancelledData = response.data.map(item => item.cancelled);

    ctxAverageChart = document.getElementById('AverageChart');
    window.AverageChart = new Chart(ctxAverageChart, {
        type: 'bar',
        data: {
            labels: ['a', 'b', 'c', 'd'],
            datasets: [
                {
                    label: 'Completed',
                    data: ['1234', '739', '832', '812'],
                    backgroundColor: '#597445',
                    borderColor: 'rgba(75, 192, 192, 1)'
                },
                {
                    label: 'Accepted',
                    data: ['1234', '739', '832', '812'],
                    backgroundColor: '#1679AB',
                    borderColor: 'rgba(54, 162, 235, 1)'
                },
                {
                    label: 'On Hold',
                    data: ['1234', '739', '832', '812'],
                    backgroundColor: '#FFA62F',
                    borderColor: 'rgba(255, 206, 86, 1)'
                },
                {
                    label: 'Cancelled',
                    data: ['1234', '739', '832', '812'],
                    backgroundColor: '#C40C0C',
                    borderColor: 'rgba(255, 99, 132, 1)'
                }
            ]
        },
        options: {
            responsive: true,
            plugins: {
                title: {
                    display: true,
                    text: 'GAA Wise Chart'
                },
                legend: {
                    position: 'bottom'
                }
            },
            scales: {
                y: {
                    type: 'logarithmic',
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: 'Job Count'
                    },
                    elements: {
                        bar: {
                            borderWidth: 5
                        }
                    },
                    ticks: {
                        callback: function (value) {
                            if (value === 2000000) return '20L';
                            if (value === 1000000) return '10L';
                            if (value === 100000) return '1L';
                            if (value === 10000) return '10K';
                            if (value === 1000) return '1K';
                            return null;
                        }
                    }
                },
                x: {
                    grid: {
                        offset: true
                    },
                    title: {
                        display: true,
                        text: 'Zone'
                    }
                }
            }
        }
    });
}

选择过滤器后的代码

success: function (response) {
    console.log("API Response:", response);
    window.AverageChart.destroy();
    ctxAverageChart = document.getElementById('AverageChart');
    debugger;
    //if (window.AverageChart) window.AverageChart.destroy();
    //ctxAverageChart.canvas.maxHeight = '400px';
    //window.AverageChart.canvas.height = '400px';
    labelsAverageChart = response.data.map((item, index) => `${item.gaapath} (${index + 1})`);
    let jobsCompleted = response.data.map(item => item.jobsCompleted);
    let jobsAccepted = response.data.map(item => item.jobsAccepted);
    let jobsOnHold = response.data.map(item => item.jobsOnHold);
    let jobsCancelled = response.data.map(item => item.jobsCancelled);
    debugger;
    window.AverageChart = new Chart(ctxAverageChart, {
        type: 'bar',
        data: {
            labels: ['a', 'b', 'c', 'd'],
            datasets: [
                {
                    label: 'Completed',
                    data: ['1234', '739', '832', '812'],
                    backgroundColor: '#597445',
                    borderColor: 'rgba(75, 192, 192, 1)'
                },
                {
                    label: 'Accepted',
                    data: ['1234', '739', '832', '812'],
                    backgroundColor: '#1679AB',
                    borderColor: 'rgba(54, 162, 235, 1)'
                },
                {
                    label: 'On Hold',
                    data: ['1234', '739', '832', '812'],
                    backgroundColor: '#FFA62F',
                    borderColor: 'rgba(255, 206, 86, 1)'
                },
                {
                    label: 'Cancelled',
                    data: ['1234', '739', '832', '812'],
                    backgroundColor: '#C40C0C',
                    borderColor: 'rgba(255, 99, 132, 1)'
                }
            ]
        },
        options: {
            plugins: {
                title: {
                    display: true,
                    text: 'GAA Wise Chart'
                },
                legend: {
                    position: 'bottom'
                }
            },
            scales: {
                y: {
                    gridLines: {
                        display: false
                    },
                    //type: 'logarithmic',
                    title: {
                        display: true,
                        text: 'Job Count'
                    }
                    // ticks: {
                    //     callback: function (value) {
                    //         if (value === 2000000) return '20L';
                    //         if (value === 1000000) return '10L';
                    //         if (value === 100000) return '1L';
                    //         if (value === 10000) return '10K';
                    //         if (value === 1000) return '1K';
                    //         return null;
                    //     }
                    // }
                },
                x: {
                    gridLines: {
                        offsetGridLines: true,
                        display: false,
                        borderDash: [6, 2],
                        tickMarkLength: 5
                    },
                    title: {
                        display: true,
                        text: 'Zone'
                    }
                }
            }
        }
    });
},
error: function (error) {
    console.error("API Error:", error);
}

我尝试过使用响应式、维护纵横比。

Answer 1

得到了答案，希望这对面临同样问题的其他人也有帮助显然，如果

(window.AverageChart) window.AverageChart.destroy(); ctxAverageCharts.canvas.height = 100;

，您可以在销毁画布后设置画布的高度 通过上面的行我能够解决这个问题。