1

http://jsfiddle.net/jjhii/46bv10db/1/

<canvas id="canvas" width="800px" height="600px">data</canvas>
canvg(document.getElementById('canvas'), svg);

別のビューで、問題を簡単に確認できます。 http://jsfiddle.net/46bv10db/5/

上記の例では、右側のラベルが PNG ファイルのチャートの後ろにある場所を確認できます。元のグラフには、これらのラベルが右側にあります。基本的にコンセプトには2つの問題があります。1 つ目は、カートの幅が広すぎることです (PNG ファイル)。2 つ目は、ラベルが遅れていることです。チャートシックスを修正したいのですが、少なくともラベルを前に置くだけで十分です。

任意の提案、ありがとう。

4

1 に答える 1

1

出力は D3 チャートからのものです。x、y、幅、高さから行列にラベルを作成するときに attr 関数を変更しました。PNG ファイルが正しくなりました。コメントアウトされた行は、私が削除したものであることに注意してください。

    var x = (width + 5).toString();
    var y1 = ((height / 4) + (30 * i) + 5).toString();
    var y2 = ((height / 4) + (30 * i)).toString();

    focus.append("svg:text")
        //.attr("dx", x)
        //.attr("dy", y2)
        //.attr("width", "100")
        //.attr("height", "10")
        //.attr("class", "rightLabel")
        //.attr("text-anchor", "left")
        .attr("transform", "matrix(1, 0, 0, 1, " + x + ", " + y2 + ")")
        .attr("font-family", "ArialMT")
        .attr("font-size", "12")
        .text(rightText[i]);
于 2016-04-14T14:18:09.423 に答える