1

'canvas' HTML5 タグを使用して、ブレットグラフを表示する HTML および JavaScript ファイルを作成しました。Chrome で試してみたところ、うまく機能し、ブラウザのサイズに合わせて幅が変化します。IE8 でもこれを機能させる必要があるため、Excanvas を使用しましたが、これは 1 つの方法を除いてすべて機能します。ブラウザーのサイズを変更すると、valueIndicator の残りが得られます。これは IE8 でのみ発生します。

キャンバスの再描画に関する情報を探してみましたが、これは問題ではないと思います。私が間違っているところを誰かに見てもらえますか？

編集 私は完全なコードを一番下に置いていますが、アドバイスに従って、コードをいくらか削減しました。

IE8 では次のようになります。

http://dl.dropbox.com/u/6985149/MessedUp.bmp

Chrome では次のようになります。

ここに画像の説明を入力

IE8 ページを更新すると、再び正常に表示されます。

カットダウン Bulletgraph.html:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Bulletgraph</title>
        <!--[if IE]><script src="excanvas.js"></script><![endif]-->
    </head>
    <body>
        <canvas id="graph1"></canvas>
        <script src="Scripts.js"></script>
        <script>
            drawGraphs();
            window.onresize=function() { drawGraphs() };

            function drawGraphs() {
                drawBulletGraph(getScreenWidth(),300,1000,350,"graph1");
            }
        </script>
    </body>
</html>

完全なコード:

Scripts.js の削減:

function drawBulletGraph (cwidth, left, right, loValue, id) {
    var canvas=document.getElementById(id);
    var cheight=30;

    var multiplier=cwidth/(right-left);
    canvas.width=cwidth;
    canvas.height=cheight;

    var valueIndicator=canvas.getContext("2d");
    valueIndicator.lineWidth="1";
    valueIndicator.moveTo((loValue-left)*multiplier,0);
    valueIndicator.lineTo((loValue-left)*multiplier,cheight);
    valueIndicator.fill();
    valueIndicator.stroke();
}

function getScreenWidth () {
    return (window.innerWidth || document.documentElement.clientWidth)/7;
}

Bulletgraph.html:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Bulletgraph</title>
        <!--[if IE]><script src="excanvas.js"></script><![endif]-->
    </head>
    <body>
        <canvas id="graph1"></canvas><br>
        <canvas id="graph2"></canvas>
        <script src="Scripts.js"></script>
        <script>
            drawGraphs();
            window.onresize=function() { drawGraphs() };

            function drawGraphs() {
                drawBulletGraph(bgWidth(getScreenWidth()),300,400,450,600,700,1000,800,350,850,"graph1");
                drawBulletGraph(bgWidth(getScreenWidth()),250,450,500,650,700,1200,600,350,850,"graph2");
            }
        </script>
    </body>
</html>

Scripts.js:

function drawBulletGraph (cwidth, left, loRed, loAmber, hiAmber, hiRed, right, value, loValue, hiValue, id) {
    var canvas=document.getElementById(id);
    var cheight=16;
    var colour="#008000";
    if (value <= loRed || value >= hiRed)
        {
            colour="#FF0000";
        }
    else if (value <= loAmber || value >= hiAmber)
        {
            colour="#FFA500";
        }
    var multiplier=cwidth/(right-left);
    canvas.width=cwidth;
    canvas.height=cheight;
    var red=canvas.getContext("2d");
    red.fillStyle="#F4C3C6";
    red.fillRect(0,0,cwidth,cheight);
    var amber=canvas.getContext("2d");
    amber.fillStyle="#F4F6C6";
    amber.fillRect((loRed-left)*multiplier,0,(hiRed-loRed)*multiplier,cheight);
    var green=canvas.getContext("2d");
    green.fillStyle="#CCE5CC";
    green.fillRect((loAmber-left)*multiplier,0,(hiAmber-loAmber)*multiplier,cheight);
    var valueIndicator=canvas.getContext("2d");
    valueIndicator.fillStyle=colour;
    valueIndicator.strokeStyle=colour;
    valueIndicator.lineWidth="2";
    valueIndicator.moveTo((loValue-left)*multiplier,0);
    valueIndicator.lineTo((loValue-left)*multiplier,cheight);
    valueIndicator.moveTo((loValue-left)*multiplier,cheight/2);
    valueIndicator.lineTo((hiValue-left)*multiplier,cheight/2);
    valueIndicator.moveTo((hiValue-left)*multiplier,0);
    valueIndicator.lineTo((hiValue-left)*multiplier,cheight);
    valueIndicator.moveTo(((value-left)*multiplier)-(cheight/2),cheight/2);
    valueIndicator.stroke();
    valueIndicator.lineWidth="1";
    valueIndicator.lineTo((value-left)*multiplier,cheight);
    valueIndicator.lineTo(((value-left)*multiplier)+(cheight/2),cheight/2);
    valueIndicator.lineTo((value-left)*multiplier,0);
    valueIndicator.lineTo(((value-left)*multiplier)-(cheight/2),cheight/2);
    valueIndicator.fill();
    valueIndicator.stroke();
}

function getScreenWidth () {
    return window.innerWidth || document.documentElement.clientWidth;
}

function bgWidth (screenWidth) {
    var graphWidth=screenWidth/7;
    if (graphWidth<70) {graphWidth=70;}
    if (graphWidth>260) {graphWidth=260;}
    return graphWidth;
}
4

1 に答える 1

0

私は解決策を得ることができました。ちょっとしたハックのように感じますが、うまくいきます。基本的には、キャンバスの周りに白い線を描き、再び描くたびに塗りつぶします。次のコードはvar valueIndicator=canvas.getContext("2d");とvalueIndicator.lineWidth="1";行の間にあります。

valueIndicator.fillStyle="#FFFFFF";
valueIndicator.strokeStyle="#FFFFFF";
valueIndicator.moveTo(0,0);
valueIndicator.beginPath();
valueIndicator.lineTo(0,cheight);
valueIndicator.lineTo(cwidth,cheight);
valueIndicator.lineTo(cwidth,0);
valueIndicator.closePath();
valueIndicator.fill();
valueIndicator.stroke();
valueIndicator.strokeStyle="#000000";

完全なコードで試してみましたが、動作します。誰かがもっとエレガントな解決策を持っていて、きっとたくさんいるに違いないと思うなら、私はまだそれらを見たいと思っています。

于 2013-01-18T13:33:54.993 に答える