Chart.js总是在chart.resize（）上增加高度

Question

我在addData和removeData函数内部添加了chart.resize（），但是它总是在增加高度，并且永远不会减少！

当用户单击菜单项时，我正在更新图表。有些项目具有100多个数据，而另一些项目只有2个数据，而当数据很少时，图表总是在增加高度：

Horizo​​ntalBar

为什么会这样呢？

<canvas id="chart"></canvas>
var chartData = {
            labels: [<?php echo '"'.implode('","',  $chart_labels ).'"' ?>],
            datasets: [
                {
                    data: [<?php echo implode(',',  $chart_numbers ) ?>],
                    backgroundColor: '#184b8f',
                    hoverBackgroundColor: '#ef3e42'
                }
            ]
        };

        var barOptions = {
            responsive: true,
            maintainAspectRatio: false,
            tooltips: {
                enabled: false
            },
            hover: {
                animationDuration: 0
            },
            legend: {
                display: false
            },
            scales : {
                xAxes : [{
                    gridLines : {
                        display: false
                    },
                    ticks: {
                        beginAtZero: true,
                        color: '#cfcfcf'
                    }
                } ],
                yAxes : [ {
                    gridLines : {
                        display: false
                    },
                    ticks: {
                        fontSize: 13,
                        fontFamily: "'Open Sans'",
                        fontWeight: 600,
                    }
                }]
            },
            animation: {
            duration: 500,
            easing: "easeOutQuart",
            }
        };

        function removeData(chart) {
            chart.data.labels.pop();
            chart.data.datasets.forEach((dataset) => {
                dataset.data.pop();
            });
            chart.resize();
            chart.update();
        }

        function addData(chart, label, data) {
            chart.data.labels.push(label);
            chart.data.datasets.forEach((dataset) => {
                dataset.data.push(data);
            });
            chart.resize();
            chart.update();
        }

        var ctx = document.getElementById("chart").getContext("2d");
        var myBar = new Chart(ctx, {
                        type: 'horizontalBar',
                        data: chartData,
                        options: barOptions
                    });

Answer 1

我有同样的事情。您必须在画布周围放置一个空的div。

Answer 2

我发现一些用户在这篇文章中遇到了同样的问题：https ://github.com/jtblin/angular-chart.js/issues/84

我的解决方案是将图表的选项更改为MaintenanceAspectRatio: false。

    myChart.setOptions({
        responsive: true,
        maintainAspectRatio: false
    });