Chart.js - 响应性无法正确处理设备方向更改答案

【问题标题】：Chart.js - Responsiveness not correctly working on device orientation changeChart.js - 响应性无法正确处理设备方向更改
【发布时间】：2016-05-17 19:57:43
【问题描述】：

我已经在我的项目中实现了Chart.js，它可以正常运行，但是我在移动设备上在更改方向时遇到了问题。

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

我正在寻找一种方法不使用使用jQuery-mobile

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

【问题讨论】：

标签： javascript mobile orientation chart.js

【解决方案1】：

监听方向改变事件（在 jQuery 移动端 - $(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

【讨论】：

THX，非常...今天我终于有时间测试你的截图了，效果很好（这很完美，因为我想避免使用 jquery mobile）
css 解决的问题：canvas { width: 100% !important; } 带有图表选项：options: { resposive: true, maintainAspectRatio: false }

【解决方案2】：

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

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

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

【讨论】：