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>

所以基本上我有两个带有Javascript代码的DIV，每个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元素

1 个答案: