Chart.js总是增加图表上的高度,resize()

u5rb5r59  于 2022-11-06  发布在  Chart.js
关注(0)|答案(4)|浏览(217)

我在addData和removeData函数中添加了chart.resize(),但是它总是增加高度,而且从来没有减少!
当用户点击菜单项时,我正在更新图表。有些项有100多个数据,有些项只有2个数据,当数据很少时,图表总是在增加高度:
horizontalBar
为什么会发生这种情况?

<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
                    });
sq1bmfud

sq1bmfud1#

我也有过同样的经历。你必须在画布周围放一个空的div。

mitkmikd

mitkmikd2#

我发现一些用户在此帖子中遇到了同样的问题:https://github.com/jtblin/angular-chart.js/issues/84
我的解决方案是将图表的选项更改为maintainAspectRatio:错误

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

cnwbcb6i3#

在laravel livewire中,修复了将wire:ignore添加到 Package 器div

<div wire:ignore>
    <div class="chart-container" style="height: 80vh; width: 80vh;">
       <canvas id="bar-chart" height="800" width="1500"></canvas>
    </div>
</div>
bvk5enib

bvk5enib4#

我在布尔玛瓷砖上也遇到了同样的问题。
修复方法是在Chart.js脚本选项区域中设置responsive: false

相关问题