Question

我已将Chart.js实施到我的项目中，该项目没有问题，但我在移动设备上更改方向时出现问题。

如果屏幕从portait模式更改为landscape，则所有内容都会按预期调整大小，
将表单landscape更改为portrait时，但 图表未调整大小 ...它会保持横向模式的宽度。

我正在寻找一种方法来执行此操作不使用使用jQuery-mobile

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

Answer 1

监听方向更改事件（在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替换每个

Answer 2

我在不同的方向上遇到了与移动小工具类似的问题。它是使用CSS样式解决的。例如：

@media (orientation:portrait) {
 .chart-container {
   min-height: 40vh;
 }
}

@media (orientation:landscape) {
 .chart-container {
   min-height: 90vh;
 }
}

Chart.js - 响应性未正确处理设备方向更改

2 个答案: