Невозможно разместить модальное окно с диаграммой Google

Я хочу показать модальное окно с диаграммой Google внутри после нажатия кнопки.

Но мой всегда выглядит очень некрасиво и не подходит под модальный размер.

Что я хочу сделать, так это увеличить размер модального окна, увеличить размер диаграммы и собрать их вместе, чтобы они выглядели лучше.

Вот результат, который у меня есть, он выглядит так: Невозможно разместить модальное окно с диаграммой Google

Вот html для модального:

<button id = "getChart" type = "submit" class = "btn btn-outline-info" data-toggle = "modal" data-target = "#exampleModalCenter"> Result</button>


<div class = "modal fade" id = "exampleModalCenter" tabindex = "-1" role = "dialog" aria-labelledby = "exampleModalCenterTitle" aria-hidden = "true">
    <div class = "modal-dialog">
        <div class = "modal-content">
            <div class = "modal-header">
                <button type = "button" class = "close" data-dismiss = "modal">&times;</button>
            </div>
            <div class = "modal-body">
                <div class = "chart" id = "chart_div"></div>
            </div>
            <div class = "modal-footer">
                <div id='png'></div>
            </div>
        </div>
    </div>
</div>

Вот стили CSS:

    .chart {
    align-content: center;
    display: flex;
    justify-content: center;
}

.modal {
    text-align: center;
}

@media screen and (min-width: 768px) {
    .modal:before {
        content: " ";
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }
}

.modal-dialog {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}

.modal-footer {
    color: #00b5e6;
    font-size: 25px;
    text-align: center;
}

И код js:

$('#getChart').click(getCheckboxesValues);

google.charts.load('current', {'packages':['corechart']});

function drawChart() {
    var data = google.visualization.arrayToDataTable(chartObject);

    var options = {
        title: 'Company Performance',
        curveType: 'none',
        legend: {position: 'bottom'}
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

    // The select handler. Call the chart's getSelection() method
    function selectHandler() {
        var selectedItem = chart.getSelection()[0];
        if (selectedItem) {
            var task = data.getValue(selectedItem.row, 0);
            alert('The user selected ' + task);
        }
    }

    google.visualization.events.addListener(chart, 'select', selectHandler);

    chart.draw(data, options);
}

Пожалуйста, включите исполняемый код.

Sumesh TG 26.10.2018 08:35

@ sumesh-tg Я не могу включить исполняемый код страницы, потому что беру некоторые данные с сервера. Но я создал довольно эквивалентную страницу в коде и имитирую данные для диаграммы в довольно близком формате, который я получаю с сервера. Вот ссылка codepen.io/Armen91/pen/vVbOmW

Armen 26.10.2018 09:15

Думаю, проблема в данных по оси X. потому что если диаграмма не в модальном окне, она отображается под углом и не перекрывает друг друга. Но в модальном режиме он отображается прямо в линию. Но в любом случае я хочу как следует увеличить оба размера - и для модального, и для диаграммы.

Armen 26.10.2018 09:20

слишком много данных по оси абсцисс.

Sumesh TG 26.10.2018 09:25
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
4
386
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы должны использовать фактический date (а не строку) в качестве ключа для данных и format: 'YYYY-MM-dd' для правильного форматирования даты для диаграммы.

Проверь это:

google.visualization.arrayToDataTable([
  ['date', 'speedKpi'],
  [new Date('2018-10-01T00:00:00.000Z'), 66.60145829628313],
  [new Date('2018-10-02T00:00:00.000Z'), 329.1959406713505],
  [new Date('2018-10-03T00:00:00.000Z'), 0.0],
  [new Date('2018-10-04T00:00:00.000Z'), 0.0],
  [new Date('2018-10-05T00:00:00.000Z'), 0.0],
  [new Date('2018-10-06T00:00:00.000Z'), 0.0],
  [new Date('2018-10-07T00:00:00.000Z'), 0.0],
  [new Date('2018-10-08T00:00:00.000Z'), 0.0],
  [new Date('2018-10-09T00:00:00.000Z'), 0.0],
  [new Date('2018-10-10T00:00:00.000Z'), 0.0],
  [new Date('2018-10-11T00:00:00.000Z'), 0.0],
  [new Date('2018-10-12T00:00:00.000Z'), 0.0],
  [new Date('2018-10-13T00:00:00.000Z'), 0.0],
  [new Date('2018-10-14T00:00:00.000Z'), 0.0],
  [new Date('2018-10-15T00:00:00.000Z'), 0.0],
  [new Date('2018-10-16T00:00:00.000Z'), 72.62773722627736],
  [new Date('2018-10-17T00:00:00.000Z'), 0.0],
  [new Date('2018-10-18T00:00:00.000Z'), 0.0],
  [new Date('2018-10-19T00:00:00.000Z'), 0.0],
  [new Date('2018-10-20T00:00:00.000Z'), 0.0],
  [new Date('2018-10-21T00:00:00.000Z'), 0.0],
  [new Date('2018-10-22T00:00:00.000Z'), 0.0],
  [new Date('2018-10-23T00:00:00.000Z'), 0.0],
  [new Date('2018-10-24T00:00:00.000Z'), 0.0],
  [new Date('2018-10-25T00:00:00.000Z'), 0.0],
  [new Date('2018-10-26T00:00:00.000Z'), 0.0]
]);

...

var options = {
  title: 'Company Performance',
  curveType: 'none',
  legend: { position: 'bottom' }, hAxis: { format: 'YYYY-MM-dd' }
};

Обновлено:

Кроме того, вы можете использовать опцию slantedText, чтобы немного повернуть клавиши, чтобы вы могли их видеть:

hAxis: {slantedText: true}

Резюме здесь: https://codepen.io/extempl/pen/aRXvLY

Пожалуйста, также проверьте Документация для получения дополнительных опций и контроля над результатом.

Большое спасибо, выглядит намного лучше! Иногда, может быть, вы знаете, как я могу увеличить размер модального окна и диаграммы, потому что, когда я использую атрибуты размера, они не подходят друг другу и неправильно воспроизводятся.

Armen 26.10.2018 09:58
options: {width: 1000} увеличит ширину графика. Но есть также стиль для модального окна, который следует перезаписать с помощью .modal-dialog { max-width: none; }.
extempl 26.10.2018 10:07

Другие вопросы по теме