Javascript跳过第一个可视化

Question

我有2个画布可视化来自2个不同标签的值。 我写了两个几乎相同的javascripts，当我运行我的应用程序时。它跳过第一个可视化，只显示第二个。我的错误在哪里？

这是我的HTML代码： -

<div><canvas id="canvas" width="300" height="300"></canvas></div>
<asp:Label ID="LblGauge" runat="server"></asp:Label>

<div><canvas id="canvas2" width="300" height="300"></canvas></div>
<asp:Label ID="LblGauge1" runat="server"></asp:Label>

这是我的2个javascripts。现在唯一的区别是canvas / canvas2和lblgauge以及lblgauge1。即使我更改了第二个脚本中的所有变量，它仍然只显示第二个可视化。

    <script>
    window.onload = function () {
        //canvas initialization
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        //dimensions
        var W = canvas.width;
        var H = canvas.height;
        //Variables
        var degrees = document.getElementById("LblGauge").textContent;
        var new_degrees = 0;
        var difference = 0;
        var color = "lightgreen";
        var bgcolor = "#222";
        var text;
        var animation_loop, redraw_loop;

        function init() {
            //Clear the canvas everytime a chart is drawn
            ctx.clearRect(0, 0, W, H);

            //Background 360 degree arc
            ctx.beginPath();
            ctx.strokeStyle = bgcolor;
            ctx.lineWidth = 30;
            ctx.arc(W / 2, H / 2, 100, 0, Math.PI * 2, false); 
            ctx.stroke();

            //Angle in radians = angle in degrees * PI / 180
            var radians = degrees * Math.PI / 180;
            ctx.beginPath();
            ctx.strokeStyle = color;
            ctx.lineWidth = 30;
            //the arc will start from the topmost end
            ctx.arc(W / 2, H / 2, 100, 0 - 90 * Math.PI / 180, radians - 90 * Math.PI / 180, false);
            ctx.stroke();

            //Lets add the text
            ctx.fillStyle = color;
            ctx.font = "50px bebas";
            text = Math.floor(degrees / 360 * 100) + "%";
            text_width = ctx.measureText(text).width;
            ctx.fillText(text, W / 2 - text_width / 2, H / 2 + 15);
        }

        function draw() {
            //Cancel any movement animation if a new chart is requested
            if (typeof animation_loop != undefined) clearInterval(animation_loop);
            ////time for each frame is 1sec / difference in degrees
            animation_loop = setInterval(animate_to, 1000 / difference);
        }

        //function to make the chart move to new degrees
        function animate_to() {
            if (degrees == new_degrees)

                if (degrees < new_degrees)
                    degrees++;
                else
                    degrees--;
            init();
        }
        draw();
    }
</script>

    <script>
    window.onload = function () {
        //canvas initialization
        var canvas = document.getElementById("canvas2");
        var ctx = canvas.getContext("2d");
        //dimensions
        var W = canvas.width;
        var H = canvas.height;
        //Variables
        var degrees = document.getElementById("LblGauge1").textContent;
        var new_degrees = 0;
        var difference = 0;
        var color = "lightgreen";
        var bgcolor = "#222";
        var text;
        var animation_loop, redraw_loop;

        function init() {
            //Clear the canvas everytime a chart is drawn
            ctx.clearRect(0, 0, W, H);

            //Background 360 degree arc
            ctx.beginPath();
            ctx.strokeStyle = bgcolor;
            ctx.lineWidth = 30;
            ctx.arc(W / 2, H / 2, 100, 0, Math.PI * 2, false); 
            ctx.stroke();

            //Angle in radians = angle in degrees * PI / 180
            var radians = degrees * Math.PI / 180;
            ctx.beginPath();
            ctx.strokeStyle = color;
            ctx.lineWidth = 30;
            //the arc will start from the topmost end
            ctx.arc(W / 2, H / 2, 100, 0 - 90 * Math.PI / 180, radians - 90 * Math.PI / 180, false);
            ctx.stroke();

            //Lets add the text
            ctx.fillStyle = color;
            ctx.font = "50px bebas";
            text = Math.floor(degrees / 360 * 100) + "%";
            text_width = ctx.measureText(text).width;
            ctx.fillText(text, W / 2 - text_width / 2, H / 2 + 15);
        }

        function draw() {
            //Cancel any movement animation if a new chart is requested
            if (typeof animation_loop != undefined) clearInterval(animation_loop);
            ////time for each frame is 1sec / difference in degrees
            animation_loop = setInterval(animate_to, 1000 / difference);
        }

        //function to make the chart move to new degrees
        function animate_to() {
            if (degrees == new_degrees)

                if (degrees < new_degrees)
                    degrees++;
                else
                    degrees--;
            init();
        }
        draw();
    }
</script>

有人可以告诉我如何更改我的代码。

这是javascript在工作时显示的内容。