Chart.js

Question

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

如果屏幕从 portait 模式更改为 landscape 一切都按预期调整大小，
但是将表格 landscape 更改为 portrait 图表未调整大小 ... 它保持图表的宽度横向模式。

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

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

Answer 1

侦听方向更改事件（在 jQuery 移动设备 - $(window).on("orientationchange",function(){ ... }); 中）并触发 window 调整大小（如果你有 jQuery 这可能很简单$(window).trigger('resize');

或者，您可以复制在方向更改处理程序中调整 window 大小时执行的代码

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 - 对设备方向变化的响应能力不正确

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

javascript

mobile

orientation