Chart.js 模态 window

Question

我正在尝试将条形图显示到弹出模式 window。我已经设法让模态与按钮一起工作，但图表不会出现。

模式和按钮：

    <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';
        }
    }

我收到错误“Uncaught ReferenceError: data is not defined 在 HTMLButtonElement.btn.onclick" 行："renderChart(data, labels);" 但我不确定问题是什么。

我是编码新手，非常感谢您的帮助:)

Answer 1

我将你的代码放入编辑器，通过它的 cdn 添加了 Chart.js 库，错误是 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 在同一对象上定义它。

希望这能帮助您步入正轨

Chart.js 模态 window

Chart.js modal window

javascript

modal-dialog

chart.js