0

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

问题是在测试中,当我把

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

我制作了一个 Fiddle 以使其更易于理解。

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

请帮忙!

4

1 回答 1

1

您的 bpopup 参考似乎有一些问题。通过在 JavaScript 部分的顶部包含 bpopup 代码,我已经在小提琴中解决了这个问题。因此,向下滚动到实际应用程序代码部分的底部。

只有当画布元素可见时,您才能绘制图表。因此,将您的图表代码从 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);

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

于 2015-06-04T04:32:16.010 回答