Chart.js -设备方向改变时响应性不正确

Chart.js - Responsiveness not correctly working on device orientation change

本文关键字：响应 不正确 改变 方向 js Chart      更新时间：2023-09-26

我已经将Chart.js实现到我的项目中，该项目没有问题，但是我在移动设备上改变方向时遇到问题

如果屏幕从portait模式更改为landscape，则一切都按预期调整大小，
但当改变形式landscape到portrait 图表没有被调整大小…它保持风景模式的宽度。

我正在寻找一种方法来做到这一点没有使用jQuery-mobile

如果有人知道如何处理这种(错误)行为，我真的很高兴知道该怎么做。

监听方向改变事件(在jQuery mobile - $(window).on("orientationchange",function(){ ... });中)并触发窗口大小调整(如果你有jQuery，这可以像$(window).trigger('resize');一样简单

或者，您可以复制在方向更改处理程序

中调整窗口大小时执行的代码。
function () {
    // Basic debounce of resize function so it doesn't hurt performance when resizing browser.
    var timeout;
    return function () {
        clearTimeout(timeout);
        timeout = setTimeout(function () {
            Chart.helpers.each(Chart.instances, function (instance) {
                // If the responsive flag is set in the chart instance config
                // Cascade the resize event down to the chart.
                if (instance.options.responsive) {
                    instance.resize(instance.render, true);
                }
            });
        }, 50);
    };
};

主要是复制粘贴的Chart.js库代码，除了我替换了Chart.helpers.each

我在不同方向的移动设备上也遇到了类似的问题。使用CSS样式解决了这个问题。如:

@media (orientation:portrait) {
 .chart-container {
   min-height: 40vh;
 }
}
@media (orientation:landscape) {
 .chart-container {
   min-height: 90vh;
 }
}
相关文章：