Javascript 如何使用jQuery加载包含Chart.js的页面

我试图使用jQuery load（）函数将包含图表的页面加载到另一个页面上的div元素中。我读到建议将图表初始化放在完整回调中的内容。但是，这对我不起作用，因为我的图表标签和数据集是由PHP脚本以及页面上的其他几个元素生成的

以下是我的页面上包含图表的代码：

<?php 
    /*
    lots of PHP code here that loads the data to display
    final variables generated are $labelsString and $dataSetsString
    $labelsString contains the labels for the chart in the form: "label1","label2","label3" etc.
    $dataSetsString contains the data sets to show in the form:

    {
        label: "Line1",
        fillColor: "rgba(0,0,0,0)",
        strokeColor: "rgba(1,2,3,4)",
        pointColor: "rgba(1,2,3,4)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(1,2,3,4)",
        data: [1,2,3]
    },
    {
        label: "Line2",
        fillColor: "rgba(0,0,0,0)",
        strokeColor: "rgba(1,2,3,4)",
        pointColor: "rgba(1,2,3,4)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(1,2,3,4)",
        data: [4,5,6]
    }
    /*
?>



<div style="height: 100%; width: 100%;">
    OTHER HTML CONTENT HERE

    <div style="height: 50%;">
      <canvas id="canvas"></canvas>
    </div>

    OTHER HTML CONTENT HERE
</div>


<script type="text/javascript">

alert("Got here 1");

        /*
            For config options see: http://www.chartjs.org/docs/
        */

        var lineChartData = {
            labels : [<?php echo $labelsString; ?>],
            datasets : [
                <?php
                    echo $dataSetsString;
                ?>
            ]

        }

alert("Got here 2");

    function loadChart(){

        alert("Got here 2A");

        var ctx = document.getElementById("canvas").getContext("2d");

        alert("Got here 2B");

        window.myLine = new Chart(ctx).Line(lineChartData, {
            responsive: true, 
            animation: false, 
            pointDot : false,
            pointDotRadius : 2, 
            pointDotStrokeWidth : 1,
            pointHitDetectionRadius : 10, 
            scaleShowGridLines : false,
            scaleGridLineColor : "rgba(0,0,0,.1)",
            scaleBeginAtZero: true,
            bezierCurve : false,
            bezierCurveTension : .2,
            showScale: true,
            scaleShowLabels: true,
            scaleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
            scaleFontSize: 10,
            scaleFontStyle: "normal",
            scaleFontColor: "#666",
            maintainAspectRatio: false
        });

        alert("Got here 2C");
    }

    loadChart();

alert("Got here 3");

</script>

因此，执行将在行内的某个位置结束：

window.myLine = new Chart(ctx).Line(lineChartData, {
            responsive: true, 
            animation: false, 
            pointDot : false,
            pointDotRadius : 2, 
            pointDotStrokeWidth : 1,
            pointHitDetectionRadius : 10, 
            scaleShowGridLines : false,
            scaleGridLineColor : "rgba(0,0,0,.1)",
            scaleBeginAtZero: true,
            bezierCurve : false,
            bezierCurveTension : .2,
            showScale: true,
            scaleShowLabels: true,
            scaleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
            scaleFontSize: 10,
            scaleFontStyle: "normal",
            scaleFontColor: "#666",
            maintainAspectRatio: false
        });

---

有什么想法吗？

发现问题不在于Chart.js，而在于jQuery限制“不在我的服务器上”的页面。要加载的页面（包含图表）使用PHP中的文件_get_contents（）加载位于另一台服务器上的一些外部JSON数据。我猜我的浏览器不知何故意识到数据是从“外部”服务器加载的，不允许显示数据。

结果表明问题不在于Chart.js，而在于jQuery限制了“不在我的服务器上”的页面。要加载的页面（包含图表）使用PHP中的文件_get_contents（）加载位于另一台服务器上的一些外部JSON数据。我猜我的浏览器不知何故意识到数据是从“外部”服务器加载的，不允许显示数据。

看起来您的php可能没有正确格式化标签，

label:Line1

应该是

label:“Line1”

@diffalot是的，您是正确的。在实际的程序中，它添加了引号，看起来我在模拟输出时意外地忽略了引号。我编辑了我的问题以反映这一点。非常感谢。看起来您的php可能没有正确格式化标签，

label:Line1

可能应该是

label:“Line1”

@diffalot是的，您是正确的。在实际的程序中，它添加了引号，看起来我在模拟输出时意外地忽略了引号。我编辑了我的问题以反映这一点。非常感谢。

var ctx = document.getElementById("canvas").getContext("2d");

window.myLine = new Chart(ctx).Line(lineChartData, {
            responsive: true, 
            animation: false, 
            pointDot : false,
            pointDotRadius : 2, 
            pointDotStrokeWidth : 1,
            pointHitDetectionRadius : 10, 
            scaleShowGridLines : false,
            scaleGridLineColor : "rgba(0,0,0,.1)",
            scaleBeginAtZero: true,
            bezierCurve : false,
            bezierCurveTension : .2,
            showScale: true,
            scaleShowLabels: true,
            scaleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
            scaleFontSize: 10,
            scaleFontStyle: "normal",
            scaleFontColor: "#666",
            maintainAspectRatio: false
        });