Styling Chart. JS диаграмм в DIV, чтобы увеличить только высоту диаграммы, но не ее ширину - PullRequest
Новая
       1

Styling Chart. JS диаграмм в DIV, чтобы увеличить только высоту диаграммы, но не ее ширину

0 голосов
/ 16 июня 2020

В настоящее время я создаю страницу с диаграммами. JS графиков и имею набор DIV, которые представляют два графика рядом и складывают их при просмотре на экране мобильного устройства. Здесь все в порядке.

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

В конечном счете, я хочу, чтобы мои диаграммы оставались бок о бок, имели одинаковую ширину, но я бы хотел, чтобы они были выше. Изменение свойства Div height для container1 или left1 / right1 создает пустое пространство под графиками. А изменение свойства высоты холста увеличивает ширину графиков, заставляя их отображаться за пределами страницы. Также установка ширины холста одновременно с высотой не имеет значения.

Есть ли кто-нибудь с опытом стилизации диаграмм. JS диаграмм, которые могут помочь мне лучше понять поведение о том, как визуализируются графики, чтобы я мог увеличивать высоту диаграмм без изменения ширины и скорости отклика страницы.

CSS Код: 

        h5 {text-align: center;}
        p {text-align: center;}

        #container1 {
          display: flex;
        }

        canvas {padding-bottom: 30px;
                padding-top: 30px;}

        #left1 {
            position: relative;
            height:auto;
            width:80vw;
            padding-top: 20px;
            padding-bottom: 20px;
        }

        #right1 {
            position: relative;
            height:auto;
            width:80vw;
            padding-top: 20px;
            padding-bottom: 20px;
        }

        @media (max-width: 800px) {
          #container1 {
            flex-direction: column;
          }
          #left1,
          #right2 {
            position: relative;
            width: 80vw;
            height:auto;
            padding-top: 20px;
            padding-bottom: 20px;
          }
        }

HTML Код : 

           <div id="container1">
            <div id="left1">
                <h5>Percentage of Correct Answers per Category</h3>
                <canvas id="myRadarChart"></canvas>
                <p>Some text goes here....</p>

            </div>
            <div id="right1">
                <h5>Question Count per Category</h3>
                <canvas id="myBarChart"></canvas>
                <p>Some text goes here...</p>
            </div>
        </div>

        <div id="container1">   
            <div id="left1">
                <h5>Current Question Count - Correct Vs Wrong</h3>
                <canvas id="myBarChartrVw"></canvas>
                <p>Some text goes here...</p>
            </div>
            <div id="right1">
            </div>
        </div>
...