Как реализовать вкладки ajax и Google Charts в Yii2 - PullRequest
0 голосов
/ 17 октября 2019

Я пытаюсь реализовать Google Charts на вкладках (ajax), чтобы динамически создавать диаграммы, когда пользователь нажимает на каждую вкладку. Я использую Yii2 и (kartik) Виджет TabX для функциональности вкладок ajax. Я использовал эти 2 виджета для Google Charts:

Мои собственные виджеты хорошо отображаются. Данные, которые я отправляю ($ data), отображаются правильно с помощью var_dump (). Но Google Chart не появляется.

Следуя инструкциям в документации TabX, я сделал следующее:

В моем конструкторе:

public function actionFetchTabs($tab=1) {                

    $html = '';
    switch($tab) {                        
        case 1:
            // ...
        case 2:
            $html = $this->renderPartial('empresa_charts', ['data'=>$this->getData()]);
            break;
    }      
    return Json::encode($html);
}

На мой взгляд:

<?= TabsX::widget([
    'encodeLabels' => false,
    'options' => ['class' => 'charts-tab'],
    'position'=>TabsX::POS_ABOVE,        
    'items' => [        
        [
            // NO ajax: Renders fine!
            'label' => Icon::show('chart-pie').'Label 1',
            'content' => Yii::$app->controller->renderPartial('default_charts',['data'=>$data2]),                
            'active' => $tab == 1,
        ],
        [
            // Ajax: Google Charts isn't rendering:
            'label' => Icon::show('clipboard-list').'Empresas',
            //What do I have to pass in content????? The documentation is not accurate.
            'content' => ???               
            'linkOptions'=>['data-url'=>Url::to(['default/fetch-tabs?tab=2'])],             
            'active' => $tab == 2,
        ],            
    ],
]);?>

Данные передаются правильно. Мой виджет рендерится без проблем с тем же массивом данных. Если я передаю renderPartial напрямую в свойство «content» виджета Tabx, все работает (как в Tab1), потому что все загружается одновременно при загрузке страницы.

enter image description here

Эта проблема возникает с двумя виджетами для Google Charts, упомянутыми выше. Я начинаю подозревать, что проблема в Google Charts и Json кодируют .

Любая помощь?

...