热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Chart.js总是在chart.resize()上增加高度

如何解决《Chart.js总是在chart.resize()上增加高度》经验,为你挑选了1个好方法。

我在addData和removeData函数内部添加了chart.resize(),但是它总是在增加高度,并且永远不会减少!

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

Horizo​​ntalBar

为什么会这样呢?


var chartData = {
            labels: [],
            datasets: [
                {
                    data: [],
                    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
                    });

idontknow.. 10

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



1> idontknow..:

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


推荐阅读
author-avatar
Vicky小希希
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有