1

thecodeplayer.com からアニメーションを使用してゲージ チャートを描画するサンプルを取得し、同じページに複数のゲージ チャートを作成するために使用できる共通の JavaScript を作成しようとしていました。サンプル コードを作成しましたが、キャンバスのすべてのゲージ チャートが 1 か所で作成されています。setInterval アニメーションと関係があることがわかりましたが、修正方法がわかりません。

更新された回答:

キャンバスの getContext() を _init() 関数内に配置して、各キャンバスを個別に指すようにすることで問題を修正しました。

更新されたフィドルはhttp://jsfiddle.net/QsMVn/4/にあります。

うまくいかない場合は、更新されたコードを次に示します。

HTML :

<div id="A" style="border: 2px solid yellow"></div>

<div id="B" style="border: 2px solid red"></div>

<div id="C" style="border: 2px solid green"></div>

<div id="D" style="border: 2px solid white"></div>

JavaScript :

var gaugeConfig = { "canvasHolderId": "A", "width": "300", "height": "300", "circleColor": "#222", "arcColor": "#00ff00", "canvasFillColor": "#333", "textPosition": "inside" }
        var gaugeConfig1 = { "canvasHolderId": "B", "width": "400", "height": "400", "circleColor": "#acacac", "arcColor": "#0000ff", "canvasFillColor": "#333", "textPosition": "inside" }
        var gaugeConfig2 = { "canvasHolderId": "C", "width": "500", "height": "500", "circleColor": "#444", "arcColor": "#ff0000", "canvasFillColor": "#333", "textPosition": "inside" }
        var gaugeConfig3 = { "canvasHolderId": "D", "width": "600", "height": "600", "circleColor": "#ccc", "arcColor": "#000000", "canvasFillColor": "#333", "textPosition": "inside" }

        function drawGauge(gc) {

            var W = gc.width;
            var H = gc.height;
            var degrees = 0;
            var new_degrees = 0;
            var difference = 0;
            var color = gc.arcColor;
            var bgcolor = gc.circleColor;
            var text;
            var animation_loop, redraw_loop;
            var me = this;
            var canvasHolder = document.getElementById(gc.canvasHolderId);
            var canvasCreator = document.createElement("canvas");

            canvasCreator.id = _randomId();
            canvasCreator.width = gc.width;
            canvasCreator.height = gc.height;
            canvasHolder.appendChild(canvasCreator);
            var canvas = document.getElementById(canvasCreator.id);


            function _randomId() {
                var d = new Date();
                return "canvas" + d.getFullYear() + "" + d.getMonth() + "" + d.getDay() + "" + d.getHours() + "" + d.getSeconds() + "" + d.getMilliseconds()*Math.random();
            }

            function _init() {

               // alert(canvasCreator.id)

                ctx = canvas.getContext("2d");
                //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, W / 3, 0, Math.PI * 2, false); //you can see the arc now
                ctx.stroke();

                //gauge will be a simple arc
                //Angle in radians = angle in degrees * PI / 180
                var radians = degrees * Math.PI / 180;
                ctx.beginPath();
                ctx.strokeStyle = color;
                ctx.lineWidth = 30;
                //The arc starts from the rightmost end. If we deduct 90 degrees from the angles
                //the arc will start from the topmost end
                ctx.arc(W / 2, H / 2, W / 3, 0 - 90 * Math.PI / 180, radians - 90 * Math.PI / 180, false);
                //you can see the arc now
                ctx.stroke();

                //Lets add the text
                ctx.fillStyle = color;
                ctx.font = "50px bebas";
                text = Math.floor(degrees / 360 * 100) + "%";
                //Lets center the text
                //deducting half of text width from position x
                text_width = ctx.measureText(text).width;
                //adding manual value to position y since the height of the text cannot
                //be measured easily. There are hacks but we will keep it manual for now.
                ctx.fillText(text, W / 2 - text_width / 2, H / 2 + 15);
            }

            function _animate_to() {
                //clear animation loop if degrees reaches to new_degrees
                if (degrees == new_degrees)
                    clearInterval(animation_loop);

                if (degrees < new_degrees)
                    degrees++;
                else
                    degrees--;

                _init();
            }

            function _draw() {

                if (typeof animation_loop != undefined) clearInterval(animation_loop);

                new_degrees = Math.round(Math.random() * 360);
                difference = new_degrees - degrees;

                //time for each frame is 1sec / difference in degrees
                animation_loop = setInterval(function () { _animate_to() }, 1000 / difference);

            }

            _draw();
            redraw_loop = setInterval(function () { _draw(); }, 2000); //Draw a new chart every 2 seconds
        }



       new drawGauge(gaugeConfig);
       new drawGauge(gaugeConfig1);
       new drawGauge(gaugeConfig2);
       new drawGauge(gaugeConfig3);
4

1 に答える 1

3

_init() の ctx は常に同じキャンバスを指しています。

4 つの異なるキャンバス コンテキストのそれぞれを指すように _init() の ctx を変更し、各コンテキストに適切なゲージを描画する必要があります。

于 2013-07-11T16:10:27.300 に答える