Chart.js & BPopUp - 在 PopUP 中制作图表

Question

我正在为学校开发一个小应用程序，需要在弹出窗口中提供一些图表。

问题出在测试中，当我把

<canvas id="myChart" width="500" height="400"></canvas> element_to_pop_up 里面的 ID 不起作用。

我做了一个Fiddle来让这个更容易理解。

https://jsfiddle.net/enanotg/od90stph/

请帮忙！

Answer 1

您的 bpopup 引用似乎有问题。我在 fiddle 中解决了这个问题，方法是在 JavaScript 部分的顶部包含 bpopup 代码。因此，向下滚动到实际应用程序代码部分的底部。

只有 canvas 元素可见后才能绘制图表。因此，将您的图表代码从您 window.onload 移动到您的 bpopup 被触发之后

(function ($) {
    // DOM Ready
    $(function () {
        // Binding a click event
        // From jQuery v.1.7.0 use .on() instead of .bind()
        $('#my-button').bind('click', function (e) {

            // Prevents the default action to be triggered. 
            e.preventDefault();

            // Triggering bPopup when click event is fired
            $('#element_to_pop_up').bPopup();

            var ctx = document.getElementById("myChart").getContext("2d");
            var step = 1;
            var max = 24;
            var start = 8;
            window.myLine = new Chart(ctx).LineAlt(lineChartData, {
                responsive: false,
                scaleOverride: true,
                scaleSteps: Math.ceil((max - start) / step),
                scaleStepWidth: step,
                scaleStartValue: start,
                pointDot: false,
                datasetFill: false,
                showTooltips: false,
            });
        });
    });
})(jQuery);

Fiddle - https://jsfiddle.net/o8twjcrL/

Chart.js & BPopUp - 在 PopUP 中制作图表

Chart.js & BPopUp - Make a Chart in a PopUP

bpopup

chart.js