Модальное окно Chart.js - PullRequest
Новая
       13

Модальное окно Chart.js

0 голосов
/ 19 июня 2019

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

Модальный и кнопка: 

    <button id = 'btn' class= 'button'> 
        Data
    </button>

    <div id = "myModal" class="modal">
        <div class="modalContent">
            <span class = "close"> &times; </span>
            <canvas id="myChart"></canvas>
        </div>
    </div>
</body>

Chart.js: 

    function renderChart(data, labels) {
        var ctx = document.getElementById("myChart").getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: [
                "GFA","GBA","NSA","FSR","Open Space Ratio","Sunlight Ratio","Ventilation Ratio","Stories"
                ],
                datasets: [{
                    label: labels,
                    data: [ 2.6, 30.6, 5.6, 6.4, 8.7, 2.1, 3.5, 9],
                    borderColor: 'rgba(75, 192, 192, 0.2)',
                    backgroundColor: 'rgba(75, 192, 192, 1)',
                }]
            },
        });
    }

Модальный: 

    var modal = document.getElementById("myModal");
    var btn = document.getElementById("btn");
    var span = document.getElementsByClassName("close")[0];

    btn.onclick = function () {
        //modal.style.display = 'block'
        renderChart(data, labels);
    }

    span.onclick = function() {
        modal.style.display = 'none';
    }

    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = 'none';
        }
    }

Iполучаю сообщение об ошибке "Uncaught ReferenceError: данные не определены в HTMLButtonElement.btn.onclick" для строки: "renderChart (data, tags);"но я не уверен, в чем проблема.

Я довольно новичок в коде, поэтому буду очень признателен за вашу помощь:)

1 Ответ

0 голосов
/ 19 июня 2019

Я взял ваш код в редактор, добавил библиотеку Chart.js через его cdn, и ошибка была data, (или labels, если я удаляю data), которая не определена. Похоже, вы пытаетесь определить data и labels, но делаете это внутри функции renderChart()

С этими аргументами, которые не требуются или передаются в функцию, похоже, что данные диаграммы отображаются нормально! Посмотрите мой рабочий пример: 

    function renderChart() {     
        var ctx = document.getElementById("myChart").getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: [
                "GFA","GBA","NSA","FSR","Open Space Ratio","Sunlight Ratio","Ventilation Ratio","Stories"
                ],
                datasets: [{
                    label: this.labels,
                    data: [ 2.6, 30.6, 5.6, 6.4, 8.7, 2.1, 3.5, 9],
                    borderColor: 'rgba(75, 192, 192, 0.2)',
                    backgroundColor: 'rgba(75, 192, 192, 1)',
                }]
            },
        });
    }
    var modal = document.getElementById("myModal");
    var btn = document.getElementById("btn");
    var span = document.getElementsByClassName("close")[0];

    btn.onclick = function () {
        modal.style.display = 'block'
        renderChart();
    }

    span.onclick = function() {
        modal.style.display = 'none';
    }

    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = 'none';
        }
    }
.modal {
  border: 1px solid black;
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<body>
    <button id = 'btn' class= 'button'> 
        Data
    </button>

    <div id = "myModal" class="modal">
        <div class="modalContent">
            <span class = "close"> &times; </span>
            <canvas id="myChart"></canvas>
        </div>
    </div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>

Обратите внимание, что мне также пришлось изменить свойство labels на this.labels, ссылаясь на labels того же объекта, для которого оно было определено.

Надеюсь, это поможет вам встать на путь

...