Chart.js - Неправильная работа при изменении ориентации устройства

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; 
} 
}