Question

我正在尝试在Jquery对话框中显示Chart.js的图表。如果我在常规页面上显示图表，它显示没有任何问题。

这是我用来尝试显示图表的Smarty模板（它包含在对话框中）：

<div class="recentstats">
    {translate id=1431}
    <canvas id="myChart" width="400" height="400"></canvas>
    <div class="chartLegend"></div>
</div>
<script src="{$scriptbase}Chart.min.js"></script>
<script>
    $( document ).ready(function() {

        // Get context with jQuery - using jQuery's .get() method.
        var ctx = document.getElementById("myChart").getContext("2d");

        var data = {
            labels: ["January", "February", "March", "April", "May",     "June", "July"],
            datasets: [
                {
                    label: "My First dataset",
                    fillColor: "rgba(220,220,220,0.2)",
                    strokeColor: "rgba(220,220,220,1)",
                    pointColor: "rgba(220,220,220,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(220,220,220,1)",
                    data: [65, 59, 80, 81, 56, 55, 40]
                },
                {
                    label: "My Second dataset",
                    fillColor: "rgba(151,187,205,0.2)",
                    strokeColor: "rgba(151,187,205,1)",
                    pointColor: "rgba(151,187,205,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(151,187,205,1)",
                    data: [28, 48, 40, 19, 86, 27, 90]
                }
            ]
        };

        var options = {

                //animation: false,
                //scaleoverride: true,
                responsive: true,
                maintainAspectRatio: true,
                animationSteps: 1,
                scaleShowGridLines: true,
                scaleShowLabels: true,
                pointHitDetectionRadius: 5,
                pointDotRadius: 3,
                pointDotStrokeWidth: 0,
                scaleFontColor: "#2b2b2b",
                tooltipFillColor: "rgba(255, 255, 255, 0.8)",
                tooltipFontColor: "#2b2b2b",
                tooltipFontSize: 12,
                multiTooltipKeyBackground: "transparent",
                tooltipStrokeColor: "rgba(43,43,43,0.7)",
                tooltipTitleFontColor: "#2b2b2b",
                multiTooltipTemplate: {literal}'<% if (datasetLabel) {%><%= datasetLabel %>: <%= value %> <%if ( optional.ranking ) {%> -  {/literal}{translate id=480}{literal}: <%= optional.ranking %> <%} }%>',{/literal}
                legendTemplate: {literal}"<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){ if (datasets[i].label) {%><li><span class=\"chartLegendColor\" style=\"background-color:<%=datasets[i].pointColor%>\"></span><%if(datasets[i].label){%><span class=\"chartLegendLabel\"><%=datasets[i].label%></span><%}%></li><%} }%></ul>"{/literal}

        };

        var myLineChart = new Chart(ctx).Line(data, options);
        $(".chartLegend").html(myLineChart.generateLegend());
    });
</script>

我在这里打开对话框：

<script>    
        var buttons = {
            Join: {
                text: '{translate id=1434}',
                click: function(e) {
                    e.preventDefault();

                    showLoadingScreen();
                    showMiniSearchLoadingScreen();
                    performAction({
                        action: "addPlayer",
                        playerid: {$playerdetails.player_id},
                        starting: 1,
                        leagueid: memberleagueid
                    });
                    // close dialog after adding player
                    $( this ).dialog( "destroy" );
                }
            }
        }

    $( "#dialog" ).dialog({
        resizable: false,
        width: 855,
        height: 650,
        modal: true,
        dialogClass: 'no-close fixed-dialog player-profile-dialog',

        buttons: buttons,


    }).attr('id', 'dialog');

    function newPopup(url) {
        popupWindow = window.open(
                   url,'popUpWindow','height=700,width=960,left=10,top=10,resizable=no,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
    }

</script>

现在，当我使用Firebug检查元素时，画布的宽度和高度为0，这解释了无法绘制图表的原因。但我不明白为什么宽度和高度设置为0.

我也在对话框中使用Bootstrap选项卡，但即使没有选项卡，也不会显示图表。

有人知道我在这里缺少什么吗？

Answer 1

我自己找到了解决方案。奇怪的是，使它工作的是将实例化图表对象的代码移动到我调用对话框的同一个Smarty模板。在这种情况下，画布确实有一个大小，并正确绘制图表。它也在Bootstrap选项卡中正确显示，我可以在选项卡之间切换，图表仍然有效。

（在我的情况下，图表显示在第一个选项卡中，该选项卡设置为活动状态。如果图表位于另一个尚未激活的选项卡中，我需要使用“$（'＃tab1'）。（'shown.bs.tab'，function（e）“而不是”$（document）.ready（function（）“）

所以代码现在看起来像这样：

{{1}}

Chart.js没有显示在Jquery对话框

1 个答案: