Google Charts не работает в аккордеоне Materialize

Я пытаюсь нарисовать линейные диаграммы Google аккордеоном в проекте, созданном с помощью Angular2 и Materializecss. Я знаю, что диаграмма Google не занимает всю ширину, если она нарисована в скрытом разделе DOM. Итак, чтобы применить полную ширину к диаграммам, я попытался открыть аккордеон непосредственно перед вызовом метода рисования вместе с данными и параметрами. Здесь, на снимке ниже, я получаю без осей X-Y, и даже легенды для линий не отображаются правильно. Снимок диаграммы, если она нарисована аккордеоном. введите описание изображения здесь

с теми же данными и опциями, но без гармошки дает следующий результат.

введите описание изображения здесь

Может ли кто-нибудь сказать мне, в чем может быть причина этой проблемы? Заранее спасибо.


person Akash Jain    schedule 29.05.2017    source источник
comment
используются следующие параметры: let options = {tooltip: {isHtml: true}, curveType: 'function', lineWidth: 5, legend: 'none', seriesType: line, series: {1: {type: line, color: '# 9966ff', visibleInLegend: false, areaOpacity: 0, enableInteractivity: false}, 2: {type: line, color: '# 660066', visibleInLegend: false, areaOpacity: 0, enableInteractivity: false}}, проводник: {} , ширина: '100%', высота: '100%', chartArea: {left: 15%, top: 3%, height: 80%, width: 100%}, hAxis: {textStyle: {fontSize: 9}} };   -  person Akash Jain    schedule 30.05.2017


Ответы (1)


Вы можете запустить розыгрыш при вызове onOpen:

http://materializecss.com/collapsible.html#options

Вы можете получить открытый элемент с первым его параметром.

  $('.collapsible').collapsible({
    accordion: false, // A setting that changes the collapsible behavior to expandable instead of the default accordion style
    onOpen: function(el) { alert('Open'); }, // Callback for Collapsible open
    onClose: function(el) { alert('Closed'); } // Callback for Collapsible close
  });
person Daniel Ruf    schedule 24.06.2017