Question

我正在为学校的Little应用程序工作，需要在Popup中提供一些Chart。

问题是在测试过程中，当我把

<canvas id="myChart" width="500" height="400"></canvas> 在element_to_pop_up ID内部不起作用。

我做了一个小提琴，让这个更容易理解。

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

请帮助！

Answer 1

你的bpopup参考似乎有些问题。我通过将bpopup代码包含在JavaScript部分的顶部来解决这个问题。因此，向下滚动到该部分的底部以获取实际的应用程序代码。

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

(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);

小提琴 - https://jsfiddle.net/o8twjcrL/

Chart.js＆amp; BPopUp - 在PopUP中制作图表

1 个答案: