0

この記事に従って、キャンバスを使用して円グラフを作成するために、非常によく似たコードを使用しています。

http://wickedlysmart.com/how-to-make-a-pie-chart-with-html5s-canvas/

この画像からわかるように、ラベルが上下逆になっている場合があります。

ここに画像の説明を入力

ラベルをグラフに書き込むコードは次のとおりです。

var drawSegmentLabel = function(canvas, context, i) {

        context.save();
        var x = Math.floor(canvas.width / 2);
        var y = Math.floor(canvas.height / 2);
        var degrees = sumTo(data, i);

        var angle = degreesToRadians(degrees);

        context.translate(x, y);
        context.rotate(angle);
        context.textAlign = 'right';
        var fontSize = Math.floor(canvas.height / 32);
        context.font = fontSize + 'pt Helvetica';

        var dx = Math.floor(canvas.width * 0.3) - 20;
        var dy = Math.floor(canvas.height * 0.05);
        context.fillText(labels[i], dx, dy);

        context.restore();

};

私はこれを修正しようとしているので、テキストは常に読みやすく、逆さまではありませんが、それを行う方法がわかりません!

4

2 に答える 2

2

これが私の解決策です！（少し面倒ですが、基本的な例ではうまくいくようです。エッジケースではテストしていません...）

var drawSegmentLabel = function(canvas, context, i) {

    context.save();
    var x = Math.floor(canvas.width / 2);
    var y = Math.floor(canvas.height / 2);
    var angle;
    var angleD = sumTo(data, i);
    var flip = (angleD < 90 || angleD > 270) ? false : true;

    context.translate(x, y);
    if (flip) {
        angleD = angleD-180;
        context.textAlign = "left";
        angle = degreesToRadians(angleD);
        context.rotate(angle);
        context.translate(-(x + (canvas.width * 0.5))+15, -(canvas.height * 0.05)-10);
    }
    else {
        context.textAlign = "right";
        angle = degreesToRadians(angleD);
        context.rotate(angle);
    }
    var fontSize = Math.floor(canvas.height / 25);
    context.font = fontSize + "pt Helvetica";

    var dx = Math.floor(canvas.width * 0.5) - 10;
    var dy = Math.floor(canvas.height * 0.05);
    context.fillText(labels[i], dx, dy);

    context.restore();
};
于 2013-02-07T03:02:39.773 に答える
0

テキストを正しく表示するには、回転角度が 90 ～ 270 度であるかどうかを確認する必要があります。そうであれば、テキストが上下逆に表示されることがわかります。

正しく切り替えるには、計画された回転のキャンバスを 180 度回転させてから、右ではなく左に揃える必要があります。

var drawSegmentLabel = function(canvas, context, i) {

    context.save();
    var x = Math.floor(canvas.width / 2);
    var y = Math.floor(canvas.height / 2);
    var degrees = sumTo(data, i);

    var angle = 0;
    if (degree > 90 && degree < 270)
      angle = degreesToRadians(degrees - 180);       
     else
       angle = degreesToRadians(degrees);

    context.translate(x, y);
    context.rotate(angle);
    context.textAlign = 'right';
    var fontSize = Math.floor(canvas.height / 32);
    context.font = fontSize + 'pt Helvetica';

    var dx = Math.floor(canvas.width * 0.3) - 20;
    if (degree > 90 && degree < 270)
       dx =  20;
    var dy = Math.floor(canvas.height * 0.05);
    context.fillText(labels[i], dx, dy);

    context.restore();
};
于 2013-01-24T10:20:43.690 に答える