Генерация графа с plotly.js внутри vuetifyне позволяет графику охватить всю ширину - PullRequest
0 голосов
/ 12 октября 2018

У меня есть график plotly.js, который генерируется внутри <v-card>, который находится внутри <v-tab-item>.Когда график сгенерирован, он не охватывает всю ширину <v-card>.

<div id="app">
    <v-app>
        <v-tabs>
            <v-tab>Item 1</v-tab>
            <v-tab-item>
                <v-card class="ma-3">
                    <v-card-title>
                        <h1 class="headline">Plotly Testing 1</h1>
                    </v-card-title>
                    <v-card-text>
                        <div id="chart-elevation"></div>
                    </v-card-text>
                </v-card>
            </v-tab-item>

            <v-tab>Item 2</v-tab>
            <v-tab-item>
            </v-tab-item>
        </v-tabs>
    </v-app>
</div>

. Он дает такой результат:

enter image description here

Тем не менее, размещение <v-card> вне <v-tab-item> позволяет успешно генерировать график, охватывающий ширину:

<div id="app">
    <v-app>
        <v-card class="ma-3">
            <v-card-title>
                <h1 class="headline">Plotly Testing 1</h1>
            </v-card-title>
            <v-card-text>
                <div id="chart-elevation"></div>
            </v-card-text>
        </v-card>
    </v-app>
</div>

Производство: enter image description here

Я пробовал несколько исправлений, таких как <div id="chart-elevation"> внутри тега <v-layout child-flex>, но это приводит к тому, что график имеет ширину всего 2 пикселя.Предоставление div встроенного стиля width: 100% дает тот же результат, а также то же самое, что и стиль в классах.Я пытался использовать layout.margin.t|r|b|l, но тоже не помогло.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...