webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg

Как засунуть Chart.js во вкладки или модальное окно?

Проект на yii2. Взял виджет для графиков https://github.com/2amigos/yii2-chartjs-widget, который рендерит www.chartjs.org/docs

При обычном рендере - все ок. Как только прячу в табы или пытаюсь вставить в модальном окне - не грузится. В консоле ошибок нет. В коде только:
<canvas id="w0" width="400" height="400"></canvas>
Как уже не пробовал. И render->ajax и сформировать сразу внутри модалки:
<?php Modal::begin([
        'id'=>'get-stat',
        'size'=>'modal-lg',
        'header' => '<h2>Статистика за сегодня</h2>',
    ]);?>
    <?= \common\components\chart\ChartJs::widget([
        'type' => 'Line',
        'options' => [
            'height' => 400,
            'width' => 400
        ],
        'data' => [
            'labels' => ["00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00","07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00","16:00", "17:00", "18:00", "19:00", "20:00", "21:00","22:00", "23:00"],
            'datasets' => [
                [
                    'fillColor' => "rgba(220,220,220,0.5)",
                    'strokeColor' => "rgba(220,220,220,1)",
                    'pointColor' => "rgba(220,220,220,1)",
                    'pointStrokeColor' => "#fff",
                    'data' => [1,2,3]
                ],
                [
                    'fillColor' => "rgba(151,187,205,0.5)",
                    'strokeColor' => "rgba(151,187,205,1)",
                    'pointColor' => "rgba(151,187,205,1)",
                    'pointStrokeColor' => "#fff",
                    'data' => [1,2,3]
                ]
            ]
        ]
    ])?>
    <?php
    Modal::end();
    ?>

Результат один. Подскажите куда копать, что делать?
  • Вопрос задан
  • 749 просмотров
Пригласить эксперта
Ответы на вопрос 1
@twopizza
Canvas не рендерится в скрытых элементах, выход - рендерить по клику на таб, открытии попапа. Есть обсуждение здесь https://github.com/nnnick/Chart.js/issues/512
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы