无法在 Dreamweaver 中显示两个 Javascript 元素

Question

我完全是 Javascript 集成的菜鸟，我在 Dreamweaver 中遇到了问题。我有两个要显示的 Javascript 图表。两者都在页面上独立工作，但我无法让它们一起显示。我似乎记得很多个月前有一个类似的问题，页面上有两个 Javascript 元素，它们需要按特定顺序调用：

    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <script type="text/javascript" src="http://www.scruffybearddesign.co.uk/scripts/Chart.js"></script>
    </head>

<body>

    <div id="canvas-holder">
        <canvas id="chart-area" width="300" height="300"/>
    </div>


<script>

    var pieData = [
            {
                value: 300,
                color:"#F7464A",
                highlight: "#FF5A5E",
                label: "Red"
            },
            {
                value: 50,
                color: "#46BFBD",
                highlight: "#5AD3D1",
                label: "Green"
            },
            {
                value: 100,
                color: "#FDB45C",
                highlight: "#FFC870",
                label: "Yellow"
            },
            {
                value: 40,
                color: "#949FB1",
                highlight: "#A8B3C5",
                label: "Grey"
            },
            {
                value: 120,
                color: "#4D5360",
                highlight: "#616774",
                label: "Dark Grey"
            }

        ];

        window.onload = function(){
            var ctx = document.getElementById("chart-area").getContext("2d");
            window.myPie = new Chart(ctx).Pie(pieData);
        };



 </script>
 <div style="width: 50%">
        <canvas id="canvas" height="450" width="600"></canvas>
    </div>


<script>
var randomScalingFactor = function(){ return Math.round(Math.random()*100)};

var barChartData = {
    labels : ["January","February","March","April","May","June","July"],
    datasets : [
        {
            fillColor : "rgba(220,220,220,0.5)",
            strokeColor : "rgba(220,220,220,0.8)",
            highlightFill: "rgba(220,220,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
        },
        {
            fillColor : "rgba(151,187,205,0.5)",
            strokeColor : "rgba(151,187,205,0.8)",
            highlightFill : "rgba(151,187,205,0.75)",
            highlightStroke : "rgba(151,187,205,1)",
            data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
        }
    ]

}
window.onload = function(){
    var ctx = document.getElementById("canvas").getContext("2d");
    window.myBar = new Chart(ctx).Bar(barChartData, {
        responsive : true
    });
}

</script>


</body>

所以基本上我有两个 DIV，其中有 Javascript 代码，每个 DIV 单独工作正常，但不能一起工作。仅显示第二个图形。两个图都调用相同的 .JS 文件，这可能是问题所在吗？

如有任何见解，我们将不胜感激。

Answer 1

onload 事件每页只会发生一个。这就是为什么你只看到一个，另一个 onload 被忽略了。

要解决此问题，请在同一个 onload 事件

中设置两个函数来渲染图形

要解决此问题，请使用此代码：

window.addEventListener('load', function(){
    var ctx = document.getElementById("chart-area").getContext("2d");
    window.myPie = new Chart(ctx).Pie(pieData);

    ctx = document.getElementById("canvas").getContext("2d");
    window.myBar = new Chart(ctx).Bar(barChartData, {
        responsive : true
    });
})

无法在 Dreamweaver 中显示两个 Javascript 元素

Can't display two Javascript elements in Dreamweaver

javascript

dreamweaver